/* Michael Loulou Photography — version 2 « Écrin »
   Black rooms and white rooms in turn. Fine capitals, a few words in script,
   photographs that open up as the visitor scrolls.
   Every section says its tone (data-tone="dark|light"); the header follows the tone under it. */

:root{
  --night:#0a0a0a;
  --night-2:#151514;
  --day:#ffffff;
  --ink:#0a0a0a;
  --ink-soft:#55544f;
  --pale:#f4f3ef;
  --ash:#9d9c96;
  --line-d:rgba(255,255,255,.16);
  --line-l:rgba(10,10,10,.14);
  --wa:#37d052;

  --display:"Bellefair","Frank Ruhl Libre",Georgia,serif;
  --script:"Pinyon Script","Bellefair",Georgia,serif;
  --sans:"Jost","Heebo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(16px,2.4vw,36px);
  --gap:clamp(10px,1.3vw,20px);
  --section:clamp(96px,11vw,184px);
}
html[lang="he"]{
  --sans:"Heebo","Jost",system-ui,sans-serif;
  --script:"Frank Ruhl Libre","Bellefair",Georgia,serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; scrollbar-color:#3a3a37 var(--night); }
body{
  margin:0; background:var(--night); color:var(--pale);
  font-family:var(--sans); font-size:16px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
h1,h2,p,ul,figure{ margin:0; }
ul{ list-style:none; padding:0; }

[data-tone="dark"]{ background:var(--night); color:var(--pale); }
[data-tone="light"]{ background:var(--day); color:var(--ink); }
::selection{ background:var(--pale); color:var(--ink); }
[data-tone="light"] ::selection{ background:var(--ink); color:var(--day); }
:focus-visible{ outline:1px solid currentColor; outline-offset:5px; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--night); }
::-webkit-scrollbar-thumb{ background:#3a3a37; border:3px solid var(--night); border-radius:10px; }

.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip{ position:absolute; inset-inline-start:var(--gutter); top:-60px; z-index:100; background:var(--pale); color:var(--ink); padding:10px 16px; }
.skip:focus{ top:12px; }
.arrow{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; transition:transform .6s var(--ease); }
[dir="rtl"] .arrow{ transform:scaleX(-1); }

/* ---------- Type: fine capitals, script for the words between *stars* ---------- */
.display{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  letter-spacing:.02em; line-height:1.04; text-wrap:balance;
}
.display em{
  font-family:var(--script); font-style:normal; font-weight:400; text-transform:none;
  letter-spacing:0; font-size:1.2em; line-height:.8;
}
html[lang="he"] .display{ letter-spacing:0; line-height:1.12; }
html[lang="he"] .display em{ font-weight:500; font-size:1em; }
.small-caps{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; }
html[lang="he"] .small-caps{ font-size:14px; letter-spacing:.02em; }

.link-arrow{
  display:inline-flex; align-items:center; gap:14px; padding-bottom:8px;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
}
html[lang="he"] .link-arrow{ font-size:15px; letter-spacing:.02em; }
.link-arrow:hover .arrow{ transform:translateX(5px); }
[dir="rtl"] .link-arrow:hover .arrow{ transform:scaleX(-1) translateX(5px); }

/* photo frames keep the photo's own colour while it loads */
.hero-media, .door-media, .sea-media, .page-hero-media, .trip-img, .says-img, .about-media, .vision-media, .world-media, .menu-shot{ background:var(--c); overflow:hidden; }
:is(.hero-media, .door-media, .sea-media, .page-hero-media, .trip-img, .says-img, .about-media, .vision-media, .world-media, .menu-shot) img{
  width:100%; height:100%; object-fit:cover;
}

/* ---------- Header: menu, logo, languages ---------- */
.hd{
  position:fixed; inset:0 0 auto; z-index:50; pointer-events:none;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:start;
  padding:22px var(--gutter) 0; color:#fff; transition:color .5s var(--ease);
  --logo-w:60px; --logo-r:.592;
}
.hd > *{ pointer-events:auto; }
.hd[data-tone="light"]{ color:var(--ink); background:none; }
.hd[data-tone="dark"]{ background:none; }
.hd-menu{ justify-self:start; display:flex; align-items:center; gap:14px; padding:6px 0; font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
html[lang="he"] .hd-menu{ font-size:15px; letter-spacing:.02em; }
.hd-lines{ position:relative; width:26px; height:10px; }
.hd-lines i{ position:absolute; inset-inline:0; height:1px; background:currentColor; transition:transform .5s var(--ease), top .5s var(--ease); }
.hd-lines i:first-child{ top:0; }
.hd-lines i:last-child{ top:9px; }
.menu-open .hd-lines i:first-child{ top:4.5px; transform:rotate(45deg); }
.menu-open .hd-lines i:last-child{ top:4.5px; transform:rotate(-45deg); }

/* the whole logo at the top of the home page; the camera alone once the visitor scrolls */
.hd-logo{ justify-self:center; width:var(--logo-w); transition:width .8s var(--ease); }
.hd-logo-in{ position:relative; display:block; overflow:hidden; height:calc(var(--logo-w) * var(--logo-r)); transition:height .8s var(--ease); }
.hd-logo img{ position:absolute; inset:0 0 auto; width:100%; transition:opacity .5s var(--ease); }
.hd .logo-noir, .hd[data-tone="light"] .logo-clair{ opacity:0; }
.hd[data-tone="light"] .logo-noir{ opacity:1; }
.hd.is-full{ --logo-w:132px; --logo-r:.852; }
.menu-open .hd{ color:#fff; }
.menu-open .hd .logo-clair{ opacity:1; }
.menu-open .hd .logo-noir{ opacity:0; }

.hd-end{ justify-self:end; display:flex; align-items:center; gap:26px; padding:6px 0; font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
html[lang="he"] .hd-end{ font-size:15px; letter-spacing:.02em; }
.hd-lang{ display:flex; gap:12px; }
.hd-end a{ opacity:.72; transition:opacity .3s; }
.hd-end a:hover, .hd-lang a[aria-current]{ opacity:1; }
.hd-lang a[aria-current]{ text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; }
.hd-lang a[lang="he"], .menu-lang a[lang="he"]{ font-family:"Heebo",sans-serif; letter-spacing:0; }

/* ---------- Menu: a black room ---------- */
.menu{
  position:fixed; inset:0; z-index:40; overflow:auto;
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); grid-template-rows:1fr auto; gap:32px var(--gutter);
  padding:clamp(120px,15vh,170px) var(--gutter) 28px;
  animation:menu-in .7s var(--ease);
}
.menu[hidden]{ display:none; }
@keyframes menu-in{ from{ opacity:0; } }
.menu-nav{ grid-column:1; align-self:center; }
.menu-main{ display:grid; gap:clamp(18px,2.6vh,30px); }
.menu-big{ font-family:var(--display); text-transform:uppercase; font-size:clamp(40px,5.6vw,84px); line-height:1; letter-spacing:.02em; transition:opacity .5s var(--ease); }
html[lang="he"] .menu-big{ letter-spacing:0; }
.menu-main:hover .menu-big:not(:hover), .menu-main:focus-within .menu-big:not(:focus-visible){ opacity:.32; }
.menu-sub{ display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:10px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ash); }
html[lang="he"] .menu-sub{ font-size:14px; letter-spacing:.02em; }
.menu-sub a:hover{ color:var(--pale); }
.menu-shots{ grid-column:2; grid-row:1; position:relative; align-self:stretch; min-height:320px; }
.menu-shot{ position:absolute; inset:0; opacity:0; transition:opacity .8s var(--ease); }
.menu-shot img{ scale:1.06; transition:scale 1.6s var(--ease); }
.menu-shot.is-on{ opacity:1; }
.menu-shot.is-on img{ scale:1; }
.menu-foot{ grid-column:1 / -1; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-top:22px; border-top:1px solid var(--line-d); font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.menu-lang, .menu-social{ display:flex; flex-wrap:wrap; gap:10px 26px; }
.menu-lang a, .menu-social a{ color:var(--ash); transition:color .3s; }
.menu-lang a:hover, .menu-social a:hover, .menu-lang a[aria-current]{ color:var(--pale); }
.menu-open{ overflow:hidden; }

/* ---------- Home: opening ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  height:100vh; height:100svh; min-height:560px;
  display:grid; place-items:center; text-align:center; padding:120px var(--gutter);
}
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media img{ transform:translate3d(0,var(--hy,0px),0) scale(1.04); animation:hero-zoom 3.2s var(--ease) both; }
@keyframes hero-zoom{ from{ scale:1.12; } }
.hero::after, .door::after, .sea::after, .page-hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(10,10,10,.3), rgba(10,10,10,.78)),
    linear-gradient(to bottom, rgba(10,10,10,.5), transparent 26%, transparent 70%, rgba(10,10,10,.7));
}
.hero-title{ color:#fff; font-size:clamp(46px,7vw,96px); line-height:1; animation:title-in 2s var(--ease) .35s both; }
.hero-title em{ display:inline-block; margin-bottom:.06em; }
@keyframes title-in{ from{ opacity:0; filter:blur(14px); translate:0 28px; } }
.hero-cue{
  position:absolute; inset-block-end:28px; inset-inline-start:var(--gutter);
  width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.45);
  display:grid; place-items:center; transition:background-color .4s, color .4s;
}
.hero-cue svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; animation:cue 2.4s var(--ease) infinite; }
@keyframes cue{ 50%{ translate:0 4px; } }
.hero-cue:hover{ background:#fff; color:var(--ink); }

/* ---------- Home: three photographs, the middle one opens to the whole screen ---------- */
.trip{ padding-top:var(--section); }
.trip-title{ max-width:26ch; margin-inline:auto; padding-inline:var(--gutter); text-align:center; font-size:clamp(28px,3.4vw,50px); }
.trip-stage{ --p:0; position:relative; height:250vh; margin-top:clamp(28px,4vw,64px); }
.trip-sticky{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
.trip-img{ position:absolute; }
.trip-img--c{ inset:0; clip-path:inset(calc((1 - var(--p)) * 16%) calc((1 - var(--p)) * 32%)); }
.trip-img--c img{ scale:calc(1.16 - .16 * var(--p)); }
.trip-img--l, .trip-img--r{ width:19vw; aspect-ratio:3/4; opacity:calc(1 - var(--p) * 1.6); }
.trip-img--l{ left:9vw; top:40%; translate:calc(var(--p) * -70%) calc(var(--p) * 20%); }
.trip-img--r{ right:9vw; top:12%; translate:calc(var(--p) * 70%) calc(var(--p) * -20%); }

/* ---------- Home: the big sentence and its photographs ---------- */
.says{
  position:relative; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap);
  padding:var(--section) var(--gutter);
}
.says-text{ grid-column:1 / span 8; grid-row:1; position:relative; z-index:2; font-size:clamp(34px,4.5vw,72px); line-height:1.08; }
html[lang="he"] .says-text{ font-size:clamp(32px,4.2vw,66px); }
.says-img{ --k:.08; transform:translate3d(0,var(--sy,0px),0); }
.says-img--1{ grid-column:9 / span 4; grid-row:1; aspect-ratio:3/4; align-self:start; margin-top:12vw; --k:.14; }
.says-img--2{ grid-column:2 / span 3; grid-row:2; aspect-ratio:4/5; margin-top:8vw; --k:.05; }
.says-img--3{ grid-column:6 / span 6; grid-row:2; aspect-ratio:3/2; margin-top:22vw; --k:.1; }

/* ---------- Home: the two doors, full screen ---------- */
.door, .sea{
  --g:1; position:relative; isolation:isolate; overflow:hidden;
  min-height:100vh; min-height:100svh; display:grid; place-items:center; text-align:center;
  padding:18vh var(--gutter);
}
.door-media, .sea-media{ position:absolute; inset:0; z-index:-2; }
.door-media img, .sea-media img{ scale:calc(1.16 - .16 * var(--g)); }
.door-title{ font-size:clamp(54px,8vw,96px); }
.door-title a{ transition:opacity .4s; }
.door-title a:hover{ opacity:.8; }
.door-line{ max-width:44ch; margin:20px auto 0; font-size:clamp(16px,1.3vw,19px); font-weight:400; line-height:1.5; letter-spacing:.02em; }
.door-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 30px; margin-top:34px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; }
html[lang="he"] .door-list{ font-size:15px; letter-spacing:.02em; }
.door-list a{ background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; padding-bottom:4px; transition:background-size .6s var(--ease); }
[dir="rtl"] .door-list a{ background-position:100% 100%; }
.door-list a:hover{ background-size:100% 1px; }
.door .link-arrow{ margin-top:44px; }

/* ---------- Home: about, the sentence lights up word by word ---------- */
.about{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap);
  padding:var(--section) var(--gutter);
}
.about-title{ grid-column:1 / -1; grid-row:1; position:relative; z-index:2; font-size:clamp(46px,7.4vw,96px); line-height:1; max-width:16ch; }
.about-title .w{ transition:color .6s var(--ease); }
.js-words .about-title .w{ color:rgba(244,243,239,.2); }
.js-words .about-title .w.is-lit{ color:var(--pale); }
.about-media{ grid-column:5 / span 4; grid-row:2; aspect-ratio:4/5; margin-top:-3vw; position:relative; z-index:1; }
.about-body{ grid-column:10 / span 3; grid-row:2; align-self:end; display:grid; gap:16px; font-size:15px; color:var(--ash); }
.about--solo .about-body{ grid-column:1 / span 7; grid-template-columns:1fr 1fr; gap:28px; margin-top:44px; align-self:start; }
.vision{ grid-column:1 / span 6; grid-row:3; align-self:center; margin-top:clamp(88px,10vw,168px); }
.vision-title{ font-size:clamp(36px,4.2vw,64px); }
.vision p{ max-width:46ch; margin-top:24px; font-size:17px; font-weight:300; color:rgba(244,243,239,.86); }
.vision-media{ grid-column:8 / -1; grid-row:3; aspect-ratio:3/2; margin-top:clamp(88px,10vw,168px); }

/* ---------- Home: under water ---------- */
.sea{ place-items:end center; padding-bottom:14vh; }
.sea-title{ font-family:var(--script); font-weight:400; font-size:clamp(66px,8.4vw,96px); line-height:1; }
html[lang="he"] .sea-title{ font-family:var(--display); font-size:clamp(52px,7vw,88px); }
.sea-text p{ max-width:46ch; margin:22px auto 0; color:rgba(244,243,239,.86); font-weight:300; }
.sea .link-arrow{ margin-top:30px; }

/* ---------- Home: the galleries, on a curve ---------- */
.worlds{ padding:var(--section) 0; overflow:hidden; text-align:center; }
.worlds-title{ position:relative; z-index:2; font-size:clamp(44px,6.4vw,96px); padding-inline:var(--gutter); line-height:.95; }
.worlds-track{
  display:flex; gap:clamp(12px,1.6vw,24px); margin-top:-.2em;
  padding:36px calc(50vw - 18vw) 20px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; overscroll-behavior-x:contain; cursor:grab;
}
.worlds-track::-webkit-scrollbar{ display:none; }
.worlds-track.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.world{ flex:0 0 36vw; scroll-snap-align:center; transform:perspective(1400px) rotateY(var(--ry,0deg)) scale(var(--ws,1)); transform-origin:50% 50%; }
.world-link{ display:block; }
.world-media{ aspect-ratio:4/3; }
.world-media img{ transition:scale 1.4s var(--ease); pointer-events:none; }
.world-link:hover .world-media img{ scale:1.05; }
.world-name{ display:block; margin-top:20px; font-family:var(--display); text-transform:uppercase; font-size:clamp(18px,1.6vw,24px); letter-spacing:.06em; }
html[lang="he"] .world-name{ letter-spacing:0; }
.worlds-nav{ display:flex; justify-content:center; gap:12px; margin-top:34px; }
.round-btn{ width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.4); display:grid; place-items:center; transition:background-color .4s, color .4s, border-color .4s; }
.round-btn:hover{ background:var(--pale); color:var(--ink); border-color:var(--pale); }
.round-btn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Home: questions ---------- */
.faq{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); padding:var(--section) var(--gutter) 0; }
.faq-title{ grid-column:1 / span 5; font-size:clamp(40px,4.8vw,76px); }
.faq-list{ grid-column:7 / -1; border-top:1px solid var(--line-l); }
.faq-item{ border-bottom:1px solid var(--line-l); }
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0; cursor:pointer; list-style:none;
  font-family:var(--display); text-transform:uppercase; font-size:clamp(18px,1.55vw,23px); letter-spacing:.04em; line-height:1.25;
}
html[lang="he"] .faq-q{ letter-spacing:0; }
.faq-q::-webkit-details-marker{ display:none; }
.plus{ width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; transition:transform .6s var(--ease); }
.faq-q:hover .plus, .faq-item[open] .plus{ transform:rotate(45deg); }
.faq-a p{ max-width:60ch; padding-bottom:28px; font-weight:300; font-size:17px; color:var(--ink-soft); }

/* ---------- Contact: a white room ---------- */
.contact{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); align-items:start;
  padding:var(--section) var(--gutter);
}
.contact-title{ grid-column:1 / span 6; font-size:clamp(42px,5.4vw,84px); }
.contact-p{ grid-column:1 / span 5; grid-row:2; margin-top:26px; max-width:40ch; font-size:17px; font-weight:300; color:var(--ink-soft); }
.contact-links{ grid-column:8 / -1; grid-row:1 / span 2; align-self:end; border-top:1px solid var(--line-l); }
.contact-link{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px;
  padding:24px 0; border-bottom:1px solid var(--line-l);
  font-family:var(--display); text-transform:uppercase; font-size:clamp(22px,2vw,30px); letter-spacing:.04em;
  transition:padding .6s var(--ease);
}
.contact-link:hover{ padding-inline-start:14px; }
.contact-link:hover .arrow{ transform:translateX(4px); }
[dir="rtl"] .contact-link:hover .arrow{ transform:scaleX(-1) translateX(4px); }
.contact-icon svg{ width:22px; height:22px; display:block; }

/* ---------- Footer: black, the logo at its usual size ---------- */
.ft{ padding:clamp(80px,9vw,140px) var(--gutter) 28px; }
.ft-logo{ display:block; width:clamp(130px,11vw,168px); margin-inline:auto; }
.ft-cols{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px var(--gap);
  margin-top:clamp(56px,6vw,96px); padding-top:40px; border-top:1px solid var(--line-d);
}
.ft-h{ margin-bottom:16px; font-family:var(--display); text-transform:uppercase; font-size:16px; letter-spacing:.12em; }
html[lang="he"] .ft-h{ letter-spacing:0; font-size:18px; }
.ft-cols ul{ display:grid; gap:8px; font-size:14px; color:var(--ash); }
.ft-cols ul a{ transition:color .3s; }
.ft-cols ul a:hover, .ft-cols ul a[aria-current]{ color:var(--pale); }
.ft-base{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; margin-top:clamp(56px,7vw,110px); font-size:12.5px; color:var(--ash); letter-spacing:.04em; }
.ft-rights{ flex:0 0 100%; font-size:12px; }

.wa-float{
  position:fixed; inset-block-end:18px; inset-inline-end:var(--gutter); z-index:46;
  width:52px; height:52px; border-radius:50%; background:var(--wa); color:var(--ink);
  display:grid; place-items:center; box-shadow:0 8px 22px rgba(0,0,0,.28);
  opacity:0; translate:0 14px; pointer-events:none;
  transition:opacity .5s var(--ease), translate .5s var(--ease);
}
.wa-float svg{ width:26px; height:26px; }
.wa-float.is-shown{ opacity:1; translate:0 0; pointer-events:auto; }
.wa-float:hover{ translate:0 -2px; }

/* ---------- Inner pages ---------- */
.page-hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:88vh; min-height:88svh; display:grid; place-items:center; text-align:center;
  padding:150px var(--gutter) 130px;
}
.page-hero-media{ position:absolute; inset:0; z-index:-2; }
.page-hero-media img{ animation:hero-zoom 3.2s var(--ease) both; transform:translate3d(0,var(--hy,0px),0); }
.page-title{ font-size:clamp(56px,9vw,96px); animation:title-in 1.8s var(--ease) .25s both; }
.page-intro{ max-width:44ch; margin:24px auto 0; font-size:clamp(16px,1.3vw,19px); font-weight:300; line-height:1.55; color:rgba(244,243,239,.88); }
.page-index{
  position:absolute; inset-block-end:30px; inset-inline:var(--gutter);
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 30px;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
}
html[lang="he"] .page-index{ font-size:15px; letter-spacing:.02em; }
.page-index a{ opacity:.78; transition:opacity .3s; }
.page-index a:hover{ opacity:1; }

.occ{ padding:var(--section) var(--gutter); }
.occ-head{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); row-gap:18px; align-items:end; margin-bottom:clamp(40px,5vw,84px); }
.occ-title{ grid-column:1 / span 7; font-size:clamp(40px,5.2vw,80px); }
.occ-head p{ grid-column:9 / -1; max-width:44ch; font-weight:300; font-size:16px; }
.occ--light .occ-head p{ color:var(--ink-soft); }
.occ--dark .occ-head p{ color:var(--ash); }
.masonry{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); align-items:start; }
.masonry--2{ display:none; grid-template-columns:repeat(2,minmax(0,1fr)); }
.m-col{ display:grid; gap:var(--gap); }
.masonry--3 .m-col:nth-child(2){ margin-top:clamp(48px,8vw,150px); }
.masonry--2 .m-col:nth-child(2){ margin-top:clamp(40px,12vw,90px); }
.m-item a{ display:block; overflow:hidden; background:var(--c); cursor:zoom-in; }
.m-item img{ width:100%; transition:scale 1.6s var(--ease); }
.m-item a:hover img{ scale:1.035; }
/* photographs below the fold open from the bottom when they arrive */
.m-item, .says-img, .about-media, .vision-media{ transition:clip-path 1.4s var(--ease), opacity 1.4s var(--ease); }
.is-wait{ clip-path:inset(18% 0 0 0); opacity:0; }

.pill{
  position:fixed; z-index:45; inset-block-end:18px; left:50%; translate:-50% 0;
  display:flex; gap:2px; padding:5px; max-width:calc(100vw - 2 * var(--gutter) - 70px);
  background:rgba(10,10,10,.86); color:var(--pale); border:1px solid var(--line-d); border-radius:999px;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  overflow-x:auto; scrollbar-width:none; box-shadow:0 12px 30px rgba(0,0,0,.25);
  animation:pill-in .9s var(--ease) .6s both;
}
.pill::-webkit-scrollbar{ display:none; }
@keyframes pill-in{ from{ opacity:0; translate:-50% 24px; } }
.pill a{ flex:none; white-space:nowrap; padding:11px 16px 12px; border-radius:999px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; line-height:1; color:var(--ash); transition:color .3s, background-color .4s var(--ease); }
html[lang="he"] .pill a{ font-size:14px; letter-spacing:.02em; }
.pill a:hover{ color:var(--pale); }
.pill a.is-current{ background:var(--pale); color:var(--ink); }
.pill a:focus-visible{ outline-color:var(--pale); outline-offset:-3px; }

/* ---------- Lightbox: a black room ---------- */
.lightbox{ position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; background:rgba(10,10,10,.985); color:var(--pale); }
.lightbox[open]{ animation:lb-in .5s var(--ease); }
@keyframes lb-in{ from{ opacity:0; } }
.lightbox::backdrop{ background:rgba(10,10,10,.9); }
.lb-figure{ position:absolute; inset:64px 84px 64px; display:grid; place-items:center; }
.lb-img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.lb-count{ position:absolute; inset-block-end:22px; left:50%; translate:-50% 0; font-size:12px; letter-spacing:.16em; font-variant-numeric:tabular-nums; color:var(--ash); }
.lb-btn{ position:absolute; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; transition:background-color .3s; }
.lb-btn:hover{ background:rgba(255,255,255,.08); }
.lb-btn svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.lb-close{ top:12px; inset-inline-end:14px; }
.lb-prev, .lb-next{ top:50%; translate:0 -50%; }
.lb-prev{ inset-inline-start:18px; }
.lb-next{ inset-inline-end:18px; }

/* ---------- Responsive ---------- */
@media (max-width:1099px){
  .hd-contact{ display:none; }
  .about-media{ grid-column:4 / span 5; }
  .about-body{ grid-column:9 / -1; }
}
@media (max-width:899px){
  .menu{ grid-template-columns:1fr; }
  .menu-shots{ display:none; }
  .says-text{ grid-column:1 / -1; }
  .says-img--1{ grid-column:7 / -1; grid-row:2; margin-top:48px; }
  .says-img--2{ grid-column:1 / span 5; grid-row:2; margin-top:120px; }
  .says-img--3{ grid-column:2 / span 10; grid-row:3; margin-top:40px; }
  .about-title{ max-width:none; }
  .about-media{ grid-column:2 / span 9; margin-top:32px; }
  .about-body{ grid-column:1 / -1; grid-row:3; margin-top:36px; font-size:16px; }
  .about--solo .about-body{ grid-column:1 / -1; grid-template-columns:1fr; gap:16px; }
  .vision{ grid-column:1 / -1; grid-row:4; margin-top:88px; }
  .vision-media{ grid-column:1 / -1; grid-row:5; margin-top:40px; }
  .contact-title, .contact-p{ grid-column:1 / -1; }
  .faq-title, .faq-list{ grid-column:1 / -1; }
  .faq-list{ margin-top:32px; }
  .contact-links{ grid-column:1 / -1; grid-row:3; margin-top:48px; }
  .occ-title, .occ-head p{ grid-column:1 / -1; }
  .masonry--3{ display:none; }
  .masonry--2{ display:grid; }
  .ft-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pill{ left:var(--gutter); translate:0 0; }
  [dir="rtl"] .pill{ left:auto; right:var(--gutter); }
  @keyframes pill-in{ from{ opacity:0; translate:0 24px; } }
  .lb-figure{ inset:60px 12px 84px; }
  .lb-prev, .lb-next{ top:auto; bottom:14px; translate:none; }
}
@media (max-width:759px){
  .hd{ padding-top:16px; --logo-w:50px; }
  .hd.is-full{ --logo-w:98px; }
  .hd-menu-label{ display:none; }
  .hd-end{ gap:16px; }
  .hd-lang{ gap:10px; }
  .hero{ padding-top:140px; }
  .trip-stage{ height:200vh; }
  .trip-img--c{ clip-path:inset(calc((1 - var(--p)) * 18%) calc((1 - var(--p)) * 12%)); }
  .trip-img--l, .trip-img--r{ display:none; }
  .world{ flex-basis:76vw; }
  .worlds-track{ padding-inline:12vw; }
  .contact-link{ padding-block:20px; }
  .menu-foot{ flex-direction:column; align-items:flex-start; }
  .page-index{ display:none; }
  .page-hero{ padding-bottom:90px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .trip-stage{ height:auto; }
  .trip-sticky{ position:relative; height:86vh; }
  .is-wait{ clip-path:none; opacity:1; }
}