/* ============================================================
   Tamar Iancu — portfolio styles (light, editorial)
   Fonts, colors, type scale measured from the live Wix Studio site.
   ============================================================ */
/* Manrope in two cuts the live site actually uses: regular (extralight master) + semibold */
@font-face{ font-family:"Manrope"; src:url("/assets/manrope.55ab20fc.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Manrope"; src:url("/assets/manrope2.6cec70ec.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Thermal"; src:url("/assets/thermal.ac114913.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }

/* Hebrew. Adobe's WEB build of Narkiss Hadash is Latin-only — 212 codepoints, zero Hebrew —
   even though the desktop copy Creative Cloud syncs has 50. So every Hebrew page fell back to
   whatever Hebrew face the visitor's OS happened to pick, and that went unnoticed because a
   Mac with the desktop font synced renders it correctly. Frank Ruhl Libre (SIL OFL, so we are
   allowed to self-host it) supplies the Hebrew instead. The unicode-range confines it to the
   Hebrew block, so it can never touch Latin and is fetched only on the /he/ pages. */
@font-face{ font-family:"Frank Ruhl Libre"; src:url("/assets/frankruhllibre-hebrew.c7ed9f5f.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }

:root{
  /* "narkiss-hadash" (Adobe's web project) sets the Latin; "Frank Ruhl Libre" sets the Hebrew,
     because Adobe's web build carries no Hebrew at all — see the @font-face note above.
     The desktop name "Narkiss Hadash" is deliberately NOT in these stacks. It used to sit
     second so a designer with the font synced saw the real thing locally, but that is exactly
     what hid the missing Hebrew: Tamar's Mac rendered Narkiss while every visitor got a system
     fallback. Leaving it out keeps what she sees the same as what everyone else sees.
     Manrope and Thermal stay behind as the Latin fallback — if Adobe is unreachable or the id
     is unset the site degrades to its previous typography rather than to Times. */
  --sans:"narkiss-hadash","Frank Ruhl Libre","Manrope","Helvetica Neue",Arial,sans-serif;
  --serif:"narkiss-hadash","Frank Ruhl Libre","Thermal",Georgia,"Times New Roman",serif;
  /* The extended width, in the kit at 400/700/800. Defined but deliberately unused: it is a
     display cut, and nothing on the site has asked for one yet. Set font-family:var(--display)
     on whatever earns it. Declaring it costs nothing — the browser fetches a face only when
     something actually renders in it. */
  --display:"narkiss-hadash-extended","narkiss-hadash","Frank Ruhl Libre",Arial,sans-serif;
  --ink:#2f2b36;
  --muted:rgba(47,43,54,.78);
  --line:rgba(47,43,54,.14);
  --bg:#ffffff;
  --edge:clamp(20px,3.4vw,58px);          /* content side margin (Wix ~49px @1440) */
  --maxw:1360px;
  --gap:clamp(14px,2vw,30px);             /* gallery gutter (Wix ~29px @1440) */
  --band:clamp(340px,72vh,780px);         /* height of a full-bleed home index band */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; min-height:100vh; overflow-x:clip; background:var(--bg); color:var(--ink);
  font-family:var(--serif); font-size:16px; line-height:1.4;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3{ font-family:var(--sans); font-weight:400; margin:0; }
p{ margin:0; }

.wrap{ width:min(100vw - var(--edge)*2, var(--maxw)); margin:0 auto; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--edge);
  background:rgba(255,255,255,.86); backdrop-filter:blur(6px);
}
.brand{ font-family:var(--serif); font-size:16px; line-height:1.4; letter-spacing:.01em; color:var(--ink); }
/* persistent desktop nav (Cargo-style): brand left, links right; hamburger takes over on mobile */
.desk-nav{ display:flex; align-items:center; gap:clamp(14px,1.5vw,26px); margin-left:auto; }
.desk-nav a{ font-family:var(--serif); font-size:14px; letter-spacing:.02em; color:var(--ink); opacity:.68; transition:opacity .2s; white-space:nowrap; }
.desk-nav a:hover{ opacity:1; }
.hamburger{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.hamburger span{ display:block; width:26px; height:2px; background:var(--ink); margin:5px 0; transition:.3s; }

/* ---------- hero (home) ---------- */
.hero{ padding:clamp(60px,8.2vw,150px) 0 clamp(30px,3.75vw,80px); }
.hero .wrap{ width:100%; max-width:none; }   /* hero is full-bleed; margins come from the title itself */
.hero-title{
  font-family:var(--sans); font-weight:400;
  /* Wix scales the hero with viewport width: font 2.846vw, left margin 13.8vw, block width 80.2vw */
  font-size:clamp(24px,2.846vw,64px); line-height:1.47; letter-spacing:-.03em;
  width:80.2vw; max-width:none; margin-left:13.8vw;
}
.hero-title .hero-lead{ font-weight:600; }   /* "Hi! I’m Tamar." — Manrope SemiBold, like the live site */

/* ---------- galleries / grids ---------- */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); align-items:start; }
.grid figure{ margin:0; }
.grid figure img{ width:100%; height:auto; }

/* home project cards */
.work{ padding:clamp(48px,7.15vw,150px) 0 clamp(34px,3.7vw,70px); }
/* grid scales with viewport (margins ~3.4vw), not capped at 1360 like the default .wrap */
.work .wrap{ width:min(93.2vw,1800px); max-width:none; }
.grid-home .card{ display:block; color:var(--ink); }
.card-img{ overflow:hidden; }
.card-img img{ width:100%; height:auto; transition:transform .6s cubic-bezier(.2,.6,.2,1); }
.grid-home .card:hover .card-img img{ transform:scale(1.03); }
.card-title{ font-family:var(--sans); font-weight:400; font-size:22px;
  line-height:1.3; letter-spacing:.01em; margin:19px 0 4px; }
.card-meta{ font-family:var(--serif); font-size:16px; line-height:1.4; letter-spacing:.01em; color:var(--ink); }

/* ---------- home index: numbered, stacked, full-bleed ---------- */
.index{ padding:clamp(34px,4.6vw,96px) 0 clamp(24px,3.4vw,70px); }
.entry{ display:block; color:var(--ink); margin-bottom:clamp(48px,6.2vw,124px); }
.entry:last-child{ margin-bottom:0; }
.entry-num{
  display:block; padding:0 var(--edge); margin-bottom:11px;
  font-family:var(--serif); font-size:13px; letter-spacing:.06em; color:var(--ink); opacity:.85;
}
.entry-img{ width:100vw; margin-left:calc(50% - 50vw); overflow:hidden; }
.entry-img img{
  width:100vw; height:var(--band); object-fit:cover; object-position:center;
  transition:transform .8s cubic-bezier(.2,.6,.2,1);
}
.entry:hover .entry-img img{ transform:scale(1.02); }
.entry-cap{ padding:15px var(--edge) 0; }
.entry-title{
  font-family:var(--sans); font-weight:400; font-size:clamp(15px,1.15vw,18px);
  line-height:1.3; letter-spacing:.01em; margin-bottom:3px; display:inline-block;
}
.entry:hover .entry-title{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.entry-meta{ font-family:var(--serif); font-size:13px; line-height:1.4; letter-spacing:.01em; color:var(--ink); opacity:.62; }

/* ---------- home bio + portrait ---------- */
.home-bio{ padding:clamp(40px,6vw,90px) 0 clamp(24px,3vw,40px); }
/* Wix bio spans ~91.5vw (margins ~4.25vw): 1317px@1440, 1537px@1680 */
.home-bio .wrap{ width:min(91.5vw,1760px); max-width:none; }
.home-bio p{ font-family:var(--sans); font-weight:400; text-align:center;
  font-size:22px; line-height:1.3; letter-spacing:.01em; max-width:none; width:100%; margin:0 auto; color:var(--ink); }
.portrait{ padding:clamp(8px,0.83vw,16px) 0 clamp(40px,5.8vw,120px); }
.portrait .wrap{ display:flex; justify-content:center; }
/* Wix portrait video scales ~31.5vw: 453px@1440, 529px@1680 */
.portrait video{ width:clamp(280px,31.5vw,640px); height:auto; display:block; }

/* ---------- about ---------- */
.about-bio{ padding:clamp(40px,6vw,80px) 0 clamp(20px,3vw,36px); }
.about-bio p{ font-family:var(--sans); font-weight:400; text-align:center;
  font-size:22px; line-height:1.3; letter-spacing:.01em; max-width:1000px; margin:0 auto; }

/* ---------- project pages ---------- */
.project .wrap{ width:min(93.2vw,1800px); max-width:none; }  /* scale like the home grid, not capped */
/* header sits inset toward centre (title ~8.5vw from left, intro ~17vw from right), like Wix */
.project .proj-head{
  display:grid; grid-template-columns:1fr minmax(280px,32vw);
  gap:clamp(24px,3vw,60px); align-items:start;
  padding:clamp(40px,6vw,80px) clamp(20px,15vw,290px) clamp(34px,5vw,64px) calc(2.95vw + 15px);
}
.proj-head h1{ font-family:var(--sans); font-weight:400;
  font-size:clamp(24px,2.2vw,28px); line-height:1.4; letter-spacing:normal; }
.proj-intro p{ font-family:var(--serif); font-size:16px; line-height:1.5; text-align:justify; }

/* gallery band: ~87vw centred container, like the live Wix gallery */
.proj-body{ width:min(87.3vw,1530px); margin:0 auto; }
.proj-body>*{ margin-bottom:clamp(28px,2.9vw,46px); }
/* tightBlocks: sections run together with only a hairline between them (no captions) */
.proj-body.tight>*{ margin-bottom:clamp(3px,0.4vw,7px); }
.cap{ max-width:600px; margin:clamp(44px,6.5vw,104px) 0 clamp(18px,2.2vw,28px); }
.cap h2{ font-family:var(--serif); font-weight:400; font-size:clamp(18px,1.55vw,22px); line-height:1.35; letter-spacing:.01em; margin-bottom:7px; }
.cap p{ font-family:var(--serif); font-size:clamp(14px,1.05vw,16px); line-height:1.65; color:var(--ink); opacity:.82; }
/* justified gallery: rows of images at a common height, natural widths, space-around */
/* fixed-width 3-column grid (images keep natural height, top-aligned) */
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(2px,0.3vw,6px); align-items:start; }
.grid3 img{ width:100%; height:auto; display:block; }
/* static grid, configurable columns (--c): desktop c-up, mobile 2-up, minimal gap, NO carousel */
.sgrid{ display:grid; grid-template-columns:repeat(var(--c,3),1fr); gap:clamp(2px,0.3vw,6px); align-items:start; }
.sgrid img{ width:100%; height:auto; display:block; cursor:zoom-in; }
/* fixed 2-column grid: desktop 2-up, mobile = swipe carousel (see mobile media query), minimal gap */
.grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(2px,0.3vw,6px); align-items:start; }
.grid2 img{ width:100%; height:auto; display:block; cursor:zoom-in; }
.g2-dots{ display:none; } /* carousel dots: mobile only (shown in the mobile media query) */
/* desktop lightbox: opened by clicking a grid2 image (JS is desktop-gated) */
.lb{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.93); }
.lb.open{ display:flex; }
.lb-img{ max-width:88vw; max-height:88vh; width:auto; height:auto; display:block; }
.lb-nav{ position:absolute; background:none; border:0; color:#fff; cursor:pointer; opacity:.75; line-height:1; transition:opacity .2s; user-select:none; }
.lb-nav:hover{ opacity:1; }
.lb-close{ top:14px; right:22px; font-size:34px; }
.lb-prev, .lb-next{ top:50%; transform:translateY(-50%); font-size:58px; padding:4px 18px; }
.lb-prev{ left:10px; }
.lb-next{ right:10px; }
/* oversized "lead" hero image for a section (Cargo/editorial): true edge-to-edge, cinematic band */
.lead{ width:100vw; margin-left:calc(50% - 50vw); }
.lead img{ display:block; width:100vw; height:clamp(340px,76vh,820px); object-fit:cover; object-position:center; cursor:zoom-in; }
.lead-cap{ margin-top:10px; text-align:center; font-family:var(--serif); font-size:12.5px; letter-spacing:.2px; color:var(--ink); opacity:.6; }
/* full-bleed images stacked edge-to-edge (desktop full-bleed / mobile one-after-the-other) */
.fbleed{ width:100vw; margin-left:calc(50% - 50vw); margin-bottom:clamp(3px,0.4vw,7px); }
.fbleed img{ width:100vw; height:auto; display:block; }
.gallery{ display:flex; flex-direction:column; row-gap:clamp(6px,0.7vw,12px); }
.grow{ display:flex; flex-wrap:wrap; justify-content:space-around; align-items:center; row-gap:clamp(6px,0.7vw,12px); }
/* last partial row: left-aligned with the full rows' gap (like Wix), not centred */
.grow.grow-partial{ justify-content:flex-start; column-gap:var(--pgap); padding-left:calc(var(--pgap) / 2); }
.grow img, .grow.vids video{ height:var(--gh); width:auto; max-width:100%; display:block; }
.grow.vids .vid{ line-height:0; }
/* single full-width image (or capped by --mw, centred) */
figure.full{ margin:0; text-align:center; }
figure.full img{ width:100%; height:auto; display:block; margin:0 auto; }
figure.full[style*="--mw"] img{ width:min(100%, var(--mw)); }
figure.full[style*="--mwpx"] img{ width:min(100%, var(--mwpx)); }
/* single full-width video */
.vid.full video{ width:100%; height:auto; display:block; background:#000; }

.proj-nav{ display:flex; justify-content:space-between; align-items:center;
  padding:clamp(30px,4vw,54px) 0 clamp(10px,2vw,20px); }
.proj-nav a{ font-family:var(--serif); font-size:15px; color:var(--ink); padding:6px 4px; }
.proj-nav a:hover{ opacity:.6; }

/* ---------- footer ---------- */
.site-footer{ padding:clamp(40px,6vw,72px) 0 40px; margin-top:clamp(15px,1.5vw,30px); }
.email-marquee{ display:block; overflow:hidden; white-space:nowrap;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; }
.email-marquee .marquee-track{ display:inline-flex; gap:2.5em; animation:marquee 30s linear infinite; }
.email-marquee span{ font-family:var(--sans); font-weight:300; letter-spacing:.06em;
  font-size:clamp(18px,2.4vw,30px); color:var(--ink); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.footer-row{ display:flex; justify-content:space-between; align-items:center;
  padding:22px var(--edge) 0; }
.footer-row a{ font-family:var(--serif); font-size:15px; color:var(--ink); }
.footer-row a:hover{ opacity:.6; }
.footer-legal{ display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; justify-content:space-between;
  padding:22px var(--edge) 0; margin-top:14px; }
.legal-links{ display:flex; flex-wrap:wrap; gap:8px 18px; }
.legal-links a{ color:var(--muted); font-size:13px; }
.legal-links a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.footer-legal .copyright{ color:var(--muted); font-size:13px; }

/* ---------- legal pages ---------- */
.legal{ padding-top:clamp(30px,4vw,50px); }
.page-head h1{ font-family:var(--sans); font-size:clamp(28px,3vw,40px); margin-bottom:18px; }
.legal-body{ max-width:70ch; padding-bottom:clamp(40px,6vw,80px); }
.legal-body h2{ font-family:var(--sans); font-weight:400; font-size:clamp(18px,1.8vw,22px); margin:30px 0 8px; }
.legal-body p{ color:var(--ink); margin:0 0 12px; line-height:1.55; }
.legal-body a{ text-decoration:underline; text-underline-offset:2px; }
.legal-updated{ margin-top:26px; font-size:13px; color:var(--muted); }

/* ---------- reveal animations ---------- */
@media (prefers-reduced-motion:no-preference){
  /* pictures rise up... */
  .reveal{ opacity:0; transform:translateY(30px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
  .reveal.in{ opacity:1; transform:none; }
  /* ...then the text rises up from the bottom, shortly after */
  .reveal-text{ opacity:0; transform:translateY(28px);
    transition:opacity .7s ease, transform .8s cubic-bezier(.22,.61,.36,1); transition-delay:.3s; }
  .reveal-text.in{ opacity:1; transform:none; }
  /* media that just fades in slowly (e.g. the portrait video) */
  .reveal-fade{ opacity:0; transition:opacity 1.2s ease; }
  .reveal-fade.in{ opacity:1; }
  /* Wix home: the pictures show first, then the hero intro text rises in shortly after */
  .hero-title{ animation:heroRise .9s cubic-bezier(.22,.61,.36,1) .7s both; }
  @keyframes heroRise{ from{ opacity:0; transform:translateY(46px); } to{ opacity:1; transform:none; } }
}
@media (prefers-reduced-motion:reduce){
  .email-marquee .marquee-track{ animation:none; }
}

/* ---------- mobile ---------- */
@media (max-width:820px){
  :root{ --band:clamp(260px,52vh,460px); }
  .entry-title{ font-size:clamp(15px,4vw,17px); }
  .hero .wrap{ padding:0 var(--edge); }
  .desk-nav{ display:none; }
  .hamburger{ display:block; }
  .lead img{ height:clamp(260px,52vh,460px); }
  .hero-title{ width:auto; max-width:100%; margin-left:0; font-size:clamp(21px,5.6vw,26px); line-height:1.4; }
  .grid, .grid-home{ grid-template-columns:1fr; }
  .grid3{ grid-template-columns:1fr 1fr; }
  .sgrid{ grid-template-columns:repeat(2,1fr); }
  .sgrid img{ cursor:default; }
  /* grid2 → horizontal swipe carousel, one image per view, snap to each */
  .grid2{ display:flex; grid-template-columns:none; gap:0; overflow-x:auto; scroll-snap-type:x mandatory;
          -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .grid2::-webkit-scrollbar{ display:none; }
  .grid2 img{ flex:0 0 100%; width:100%; scroll-snap-align:center; cursor:default; }
  .lb{ display:none !important; } /* lightbox is desktop-only */
  .g2-dots{ display:flex; justify-content:center; gap:7px; margin-top:10px; }
  .g2-dots button{ width:7px; height:7px; padding:0; border:0; border-radius:50%; background:var(--ink);
                   opacity:.25; cursor:pointer; transition:opacity .2s; }
  .g2-dots button.on{ opacity:.85; }
  .project .proj-head{ grid-template-columns:1fr; gap:14px; padding-left:var(--edge); padding-right:var(--edge); }
  .proj-intro p{ text-align:left; }
  /* galleries: 2-up on phones (vw heights would be tiny) */
  .proj-body{ width:auto; padding:0 var(--edge); }
  .grow img{ height:auto; width:calc((100% - 10px)/2); }
  /* stackMobile: one image per row on phones instead of 2-up */
  .stack-mobile .grow{ flex-direction:column; row-gap:clamp(3px,1vw,7px); }
  .stack-mobile .grow img{ width:100%; }
  .grow.vids{ flex-direction:column; row-gap:12px; }
  .grow.vids video{ height:auto; width:100%; }
  .about-bio p{ font-size:clamp(18px,4.6vw,22px); }
  .portrait video{ width:min(320px,86vw); }
}

/* ---------- menu: right-side panel + scrim (matches the live Wix menu) ---------- */
#mnav{ position:fixed; inset:0; z-index:999; visibility:hidden; transition:visibility 0s linear .4s; }
#mnav.open{ visibility:visible; transition:visibility 0s; }
.mnav-scrim{ position:absolute; inset:0; background:rgba(20,18,24,.5); opacity:0; transition:opacity .38s ease; }
#mnav.open .mnav-scrim{ opacity:1; }
.mnav-panel{
  position:absolute; top:0; right:0; height:100%; width:min(40%,620px); background:#fff;
  display:flex; flex-direction:column; align-items:center; padding-top:108px;
  box-shadow:-14px 0 40px rgba(0,0,0,.10);
  transform:translateX(100%); transition:transform .4s cubic-bezier(.4,0,.2,1);
}
#mnav.open .mnav-panel{ transform:none; }
/* Wix scales the menu with viewport width: font ≈1.265vw, line-height 1.3 (18.2px@1440, 21.25px@1680) */
.mnav-links{ display:flex; flex-direction:column; align-items:center; gap:clamp(15px,1.42vw,26px); }
.mnav-links a{ font-family:var(--sans); font-weight:400; font-size:clamp(15px,1.265vw,30px); line-height:1.3; color:#000; letter-spacing:normal; }
.mnav-links a:hover{ opacity:.55; }
#mnav .close{ position:absolute; top:30px; right:clamp(24px,3vw,52px); width:34px; height:34px; background:none; border:0; cursor:pointer; }
#mnav .close::before,#mnav .close::after{ content:""; position:absolute; left:16px; top:4px; width:1.5px; height:26px; background:var(--ink); }
#mnav .close::before{ transform:rotate(45deg); } #mnav .close::after{ transform:rotate(-45deg); }
@media (max-width:820px){
  .mnav-panel{ width:100%; box-shadow:none; }
  .mnav-links{ gap:24px; }
  .mnav-links a{ font-size:21px; }   /* readable on phones (vw would be tiny) */
}

/* ---------- accessibility ---------- */
.skip-link{ position:absolute; inset-inline-start:12px; top:-60px; z-index:1000; background:var(--ink); color:#fff;
  padding:10px 16px; font-size:15px; transition:top .2s ease; }
.skip-link:focus{ top:12px; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:1px; }

/* =============================================================================
   WORKS GRID + OVERLAY CAROUSEL — the single-page design (added 2026-08-25).
   Class names are deliberately prefixed (.works/.wcell/.wcap/.wnav): the older
   multi-page CSS above already owns .grid, .cap and .nav.
   ============================================================================= */
:root{
  --wgap:clamp(16px,4.5vw,65px);                 /* column + row gutter in the grid */
  --navgut:clamp(58px,7vw,120px);                /* clear column the overlay arrows live in */
  --wsmall:15px;
}

/* ---------- masthead (replaces the project nav; the site is one page now) ---------- */
.masthead{
  width:96vw; margin:0 auto;
  padding:clamp(22px,2.6vw,40px) 0 clamp(20px,2.4vw,38px);
  display:flex; gap:clamp(14px,3vw,54px); align-items:baseline; flex-wrap:wrap;
  font-family:var(--serif); font-size:var(--wsmall); line-height:1.45;
}
.masthead .mh-name{ white-space:nowrap; }
/* On About and the legal pages the name is the way back to the work, so let it behave
   like a link. On the home page it points at the page you are already on, so it stays flat. */
.masthead .mh-name a{ border-bottom:1px solid transparent; transition:border-color .2s; }
body:not(.home) .masthead .mh-name a:hover{ border-bottom-color:var(--ink); }
/* No lone word on a last line. `text-wrap:pretty` is the property that specifically avoids
   orphans; browsers without it wrap exactly as before, so it is safe to leave everywhere.
   A pair that must never split at all — תקשורת חזותית, "visual communication" — is bound with a
   non-breaking space in content.js instead, since CSS cannot guarantee one specific pair. */
.wcap, .ov-text, .abt-col p{ text-wrap:pretty; }
.masthead .mh-links{ margin-inline-start:auto; display:flex; gap:clamp(14px,2vw,32px); white-space:nowrap; }
.masthead .mh-links a{ opacity:.62; border-bottom:1px solid transparent; }
.masthead .mh-links a:hover{ opacity:1; border-bottom-color:var(--ink); }
/* Language toggle: both labels shown, the current one marked rather than linked. Kept LTR
   so "EN / עב" reads in that order on both sides of the site. */
.mh-lang{ display:inline-flex; align-items:baseline; gap:.34em; direction:ltr; }
.mh-lang .on{ opacity:1; border-bottom:1px solid var(--ink); }
.mh-lang .sep{ opacity:.28; }
.mh-lang a{ opacity:.62; }

/* ---------- the grid ---------- */
.works{ width:96vw; margin:0 auto; columns:3; column-gap:var(--wgap); }
.wcell{
  break-inside:avoid; margin:0 0 var(--wgap); display:block; width:100%;
  background:none; border:0; padding:0; text-align:start; cursor:pointer;
  font:inherit; color:inherit;
}
.wcell .wmedia{ display:block; }
.wcell img, .wcell video{ width:100%; height:auto; transition:opacity .25s; }
.wcell:hover img, .wcell:hover video{ opacity:.86; }
.wcell:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
.wcap{
  display:block; font-family:var(--serif); font-size:13.5px; letter-spacing:.04em;
  margin-top:7px; opacity:.55; transition:opacity .2s;
}
.wcell:hover .wcap{ opacity:.95; }

/* ---------- overlay carousel ---------- */
.ov{ position:fixed; inset:0; z-index:999; background:var(--bg); display:none; flex-direction:column; }
.ov.open{ display:flex; }
body.locked{ overflow:hidden; }
.ov-head{
  display:flex; align-items:flex-start; gap:clamp(14px,3vw,54px);
  padding:15px clamp(14px,2vw,32px) clamp(22px,2.4vw,32px); flex:0 0 auto;
  font-family:var(--serif);
}
.ov-id{ flex:0 0 auto; max-width:34ch; }
.ov-id .t{ font-size:var(--wsmall); }
.ov-id .y{ font-size:12px; margin-inline-start:10px; opacity:.5; }
.ov-text{ flex:1 1 auto; font-size:13.5px; line-height:1.6; max-width:74ch; opacity:.62; }
.ov-right{ flex:0 0 auto; display:flex; align-items:baseline; gap:16px; margin-inline-start:auto; }
.ov-n{ font-size:12px; font-variant-numeric:tabular-nums; opacity:.75; letter-spacing:.04em; }
/* Back sits at the head of the row, where a back control is looked for, rather than
   as a "(Close)" in the far corner. */
.ov-back{
  flex:0 0 auto; background:none; border:0; font:inherit; font-family:var(--serif);
  font-size:var(--wsmall); cursor:pointer; color:inherit; opacity:.62;
  padding:0; display:inline-flex; align-items:baseline; gap:.5em;
  transition:opacity .2s;
}
.ov-back:hover{ opacity:1; }
.ov-back .ov-back-a{ font-family:var(--sans); }
/* Focus shows the same underline as hover, not an outline box — the treatment every other
   link on the site uses (see .masthead .mh-links a). Still a visible focus indicator, so
   keyboard users are not left guessing. */
.ov-back .ov-back-t{ border-bottom:1px solid transparent; }
.ov-back:hover .ov-back-t,
.ov-back:focus-visible .ov-back-t{ border-bottom-color:currentColor; }
.ov-back:focus-visible{ outline:none; opacity:1; }
.stage{
  flex:1 1 auto; position:relative; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:0 var(--navgut) clamp(16px,2.4vw,34px);
}
.stage img, .stage video{
  position:absolute; max-width:calc(100% - 2*var(--navgut));
  max-height:100%; width:auto; height:auto; object-fit:contain;
  opacity:0; transition:opacity .22s; pointer-events:none;
}
.stage img.on, .stage video.on{ opacity:1; pointer-events:auto; }
.wnav{
  position:absolute; top:0; bottom:0; width:30%; border:0; background:none;
  cursor:pointer; padding:0; z-index:3; color:inherit; display:flex; align-items:center;
}
/* Physical left/right on purpose, not logical: the carousel stays identical in Hebrew,
   so the arrows must NOT swap sides under dir="rtl". */
.wnav.prev{ left:0; cursor:w-resize; justify-content:flex-start; }
.wnav.next{ right:0; cursor:e-resize; justify-content:flex-end; }
[dir="rtl"] .stage{ direction:ltr; }   /* keep the arrow row in Latin order */
.wnav .chev{
  font-family:var(--sans); font-size:28px; line-height:1;
  width:var(--navgut); text-align:center; opacity:.45; transition:opacity .2s;
}
.wnav:hover .chev{ opacity:.9; }
.wnav[hidden]{ display:none; }
/* Same idea as .ov-back: no outline box. The hit zone is 30% of the screen, so boxing it
   drew a rectangle across half the image. The chevron itself carries the state — .45 at
   rest, .9 on hover, full on focus, so a keyboard user gets a stronger signal than a
   mouse user rather than none at all. */
.wnav:focus-visible{ outline:none; }
.wnav:focus-visible .chev{ opacity:1; }

/* Scroll view. On a phone, stepping through a carousel one tap at a time hides how much
   there is; scrolling shows the whole project. The head stays put above it — .stage is
   what scrolls, not the page.
   The LAYOUT is driven by the media query alone, never by a class JS has to keep in sync:
   a missed resize event would otherwise leave a phone showing one image with the rest at
   opacity 0. app.js mirrors the same breakpoint to decide behaviour (which images to load,
   whether swiping pages), where being a beat late is harmless. */
@media (max-width:680px){
  .ov .stage{
    display:block; overflow-y:auto; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:0 3vw clamp(24px,9vw,44px);
  }
  .ov .stage img,
  .ov .stage video{
    position:static; opacity:1; pointer-events:auto;
    width:100%; max-width:100%; height:auto; max-height:none;
    margin:0 0 var(--wgap);
  }
  .ov .stage > :last-child{ margin-bottom:0; }
  .ov .ov-n{ display:none; }
}

/* ---------- about ---------- */
/* ---------- right-to-left ----------
   Most of the layout mirrors on its own now that the physical properties above are
   logical. These are the leftovers: things pinned by tracking or reading order that
   CSS cannot flip by itself. */
[dir="rtl"] .wcap{ letter-spacing:0; }        /* tracking set for Latin loosens Hebrew */
[dir="rtl"] .ov-n{ direction:ltr; }           /* "3 / 8" stays 3-then-8 */
[dir="rtl"] .legal-links{ direction:ltr; }    /* English legal labels keep English order */

.abt{ width:96vw; margin:0 auto; display:flex; gap:var(--wgap); align-items:center; flex-wrap:wrap; }
.abt-col{ flex:1 1 380px; max-width:62ch; }
.abt-col p{ margin:0 0 1.2em; font-family:var(--serif); font-size:var(--wsmall); line-height:1.6; }
.abt-link{ display:inline-block; margin-top:6px; border-bottom:1px solid var(--ink); }
/* LinkedIn + CV sit side by side; flex follows the page direction, so this serves EN and HE. */
.abt-links{ display:flex; gap:20px; flex-wrap:wrap; }
/* The portrait is a 720x1280 vertical clip. Drive it off HEIGHT, not width: unconstrained
   it renders at native size — taller than the viewport — next to a short bio. */
.abt-media{ flex:0 1 auto; margin-inline-start:auto; }
.abt-media video{ display:block; height:min(70vh,600px); width:auto; max-width:100%; }

@media (max-width:1100px){ .works{ columns:2; } }
@media (max-width:680px){
  :root{ --navgut:clamp(34px,9vw,52px); }
  .works{ columns:2; width:94vw; }   /* two columns on phones — one made the page a 5-screen scroll */
  /* Name and links share one row on phones, now that the tagline has left the masthead.
     .mh-links keeps its auto start-margin, so it stays pinned to the far edge; flex-wrap
     still catches it if a translation ever outgrows the width. */
  .masthead{ width:94vw; gap:clamp(10px,3vw,20px); }
  .abt{ align-items:flex-start; }
  .abt-media{ margin-inline:auto; }   /* the capped portrait is narrower than the text column */
  .ov-head{ flex-direction:column; gap:7px; }
  .ov-right{ margin-inline-start:0; }
  .wnav{ width:42%; }
}