/* ==========================================================================
   Jonshan Safari: foundations
   Palette sampled from the logo's painted medallion, not picked from a
   desert mood board: #DFAA57 and #C98A22 are its dunes, #F09612 its sun,
   #3D230D its ring, #2E8B8E and #D4285F the two strokes of colour in the
   sand. Those last two are the reason this page doesn't read as the usual
   cream-and-terracotta travel template. They're in the client's own mark.
   ========================================================================== */

@font-face{
  font-family:Fraunces;
  src:url(../fonts/fraunces-latin.woff2) format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:Archivo;
  src:url(../fonts/archivo-latin.woff2) format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}

:root{
  /* ground */
  --paper:#FFFCF4;
  --sand-pale:#FAF2E2;
  --sand:#F4E4C4;
  --sand-2:#EFD8AE;

  /* the dunes */
  --ochre:#DFAA57;
  --gold:#C98A22;
  /* Darkened from the logo's own #A66F16. That value is the right gold but only
     reaches 3.4:1 on --sand, and it carries body text (links, the
     timeline's time labels), not just hairlines. This clears 4.5:1 on every ground it is
     ever set against and still reads as the same colour. */
  --gold-dk:#8A5C10;
  --sun:#F09612;

  /* the dark */
  --bark:#3D230D;
  --bark-2:#5A3418;
  --bark-3:#251506;

  /* ink */
  --ink:#2E1B0A;
  --muted:#7A6249;
  --muted-lt:#C9B08C;
  --rule:#E6D3B0;
  --rule-dk:rgba(246,236,214,.16);
  --cream:#F6ECD6;

  /* the two rare accents */
  --teal:#2E8B8E;
  /* Darkened from the logo's own #2E8B8E for the same reason --gold-dk was:
     the sampled value reaches 3.6:1 on --sand-pale, which is enough for a rule
     or a tick and short of it for anything anyone has to read. This clears
     5.7:1 and is still recognisably the same colour. */
  --teal-dk:#1F6A6C;
  --rose:#D4285F;
  --wa:#25D366;

  --display:Fraunces,Georgia,'Times New Roman',serif;
  --body:Archivo,-apple-system,'Segoe UI',Roboto,sans-serif;

  --wrap:1160px;
  --gut:22px;
  --lift:0 1px 2px rgba(61,35,13,.06),0 14px 40px -22px rgba(61,35,13,.34);

  /* one impasto grain, reused everywhere something should read as painted */
  --grain:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--sand-pale);
  color:var(--ink);
  font:400 17px/1.65 var(--body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

h1,h2,h3,h4{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-variation-settings:'opsz' 96,'SOFT' 24,'WONK' 1;
  line-height:1.04;
  letter-spacing:-.018em;
  text-wrap:balance;
}

a{color:var(--gold-dk);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--bark)}

:focus-visible{outline:2.5px solid var(--sun);outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--bark);color:var(--cream);padding:12px 18px;
}
.skip:focus{left:8px;top:8px}

.vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:820px}

.band{position:relative;padding-block:clamp(64px,8vw,112px)}
.band > .wrap{position:relative;z-index:1}

.band--sand{background:var(--sand)}
.band--paper{background:var(--paper)}

/* the one dark band: where you choose how to sleep */
.band--night{
  background:var(--bark);
  color:var(--cream);
}
.band--night h1,.band--night h2,.band--night h3{color:var(--cream)}
/* :not(.btn) matters. A bare `.band--night a` is two classes and quietly beat
   every single-class .btn--* colour, so both buttons in the dark band were
   painting their label ochre, one of them ochre-on-sun, which is unreadable. */
.band--night a:not(.btn){color:var(--ochre)}

/* painted grain, so no ground is ever a flat fill */
.band--sand::before,.band--night::before,.band--paper::before{
  content:"";position:absolute;inset:0;
  background-image:var(--grain);
  opacity:.05;pointer-events:none;
}
.band--night::before{opacity:.11}

/* ---------- type ---------- */
.h1{
  font-size:clamp(46px,8.2vw,88px);
  letter-spacing:-.035em;
  font-variation-settings:'opsz' 144,'SOFT' 18,'WONK' 1;
}
.h2{
  font-size:clamp(31px,4.4vw,50px);
  letter-spacing:-.026em;
  max-width:20ch;
}
.h3{
  font-size:clamp(21px,2.2vw,26px);
  letter-spacing:-.014em;
  font-variation-settings:'opsz' 40,'SOFT' 30,'WONK' 0;
}

.lede{
  margin-top:18px;
  max-width:56ch;
  font-size:19px;
  line-height:1.62;
  color:var(--muted);
}
.band--night .lede{color:var(--muted-lt)}

.head{margin-bottom:clamp(34px,4vw,54px)}
.head--mid{text-align:center}
.head--mid .h2,.head--mid .lede{margin-inline:auto}

.small{font-size:14px;line-height:1.55;color:var(--muted)}
.band--night .small{color:var(--muted-lt)}

/* a hairline that carries the brand gold rather than a grey border */
.rule{height:1px;background:var(--rule);border:0;margin:0}
.band--night .rule{background:var(--rule-dk)}

/* ---------- buttons ----------
   The primary action is WhatsApp, but a saturated WhatsApp green on this sand
   would cheapen it. The button is the brand's own bark brown and the glyph
   inside it stays WhatsApp green, so the recognition survives without the
   palette taking the hit. On the dark band it flips to the logo's sun. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:600 15px/1 var(--body);
  letter-spacing:.01em;
  padding:19px 30px;
  border:1.5px solid transparent;border-radius:3px;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .18s,color .18s,border-color .18s,transform .12s;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:19px;height:19px;flex:none}

.btn--primary{background:var(--bark);color:var(--cream);border-color:var(--bark)}
.btn--primary:hover{background:var(--bark-3);color:#fff;border-color:var(--bark-3)}
.btn--primary .wa{color:var(--wa)}

.btn--sun{background:var(--sun);color:var(--bark-3);border-color:var(--sun)}
.btn--sun:hover{background:#FFAA2B;border-color:#FFAA2B;color:var(--bark-3)}
.btn--sun .wa{color:#0B4A24}

.btn--outline{background:transparent;color:var(--bark);border-color:var(--gold)}
.btn--outline:hover{background:var(--bark);color:var(--cream);border-color:var(--bark)}

.btn--ghost{background:transparent;color:var(--cream);border-color:rgba(246,236,214,.42)}
.btn--ghost:hover{background:var(--cream);color:var(--bark);border-color:var(--cream)}

.btn--sm{padding:14px 20px;font-size:14px}
.btn--block{display:flex;width:100%}

.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- the Google chip ---------- */
.gchip{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px 9px 12px;
  background:var(--paper);border:1px solid var(--rule);border-radius:999px;
  font:500 14px/1 var(--body);color:var(--ink);text-decoration:none;
  box-shadow:0 1px 2px rgba(61,35,13,.05);
}
.gchip:hover{border-color:var(--gold);color:var(--ink)}
.gchip__g{width:17px;height:17px;flex:none}
.gchip b{font-weight:700}
.gchip__stars{color:var(--sun);letter-spacing:1px;font-size:13px}
.gchip__n{color:var(--muted)}
.gchip--sm{padding:7px 12px 7px 10px;font-size:13px}
.band--night .gchip{background:rgba(246,236,214,.07);border-color:var(--rule-dk);color:var(--cream)}
.band--night .gchip__n{color:var(--muted-lt)}

/* ---------- the arch ----------
   The shape is lifted from the cusped windows of Patwon ki Haveli, which is
   in the client's own photograph of Jaisalmer. It earns its place three
   times over: it's unmistakably of this place, it keeps the page off the
   identical-rounded-card grid, and it holds every photo below 560px wide,
   which is exactly where these low-resolution source files still look sharp.
   Nine foils on the big frames, seven on thumbnails where nine would smear. */
.arch{margin:0}
.arch__frame{
  display:block;position:relative;
  background:var(--gold);
  padding:2.5px;
  clip-path:var(--arch-9);
}
.arch__frame img{
  width:100%;height:100%;object-fit:cover;
  clip-path:var(--arch-9);
}
.arch--sm .arch__frame,.arch--sm .arch__frame img{clip-path:var(--arch-7)}
/* The cusped crown takes a deep bite out of the top of every frame, so a photo
   whose subject sits low gets pulled up rather than losing heads to the scallops. */
.arch--low img{object-position:50% 76%}
.arch--mid img{object-position:50% 64%}
.arch figcaption{margin-top:14px;font-size:14px;color:var(--muted);line-height:1.5}
.band--night .arch figcaption{color:var(--muted-lt)}

:root{
  --arch-9:url(#arch9);
  --arch-7:url(#arch7);
}

/* ---------- header ---------- */
.head-bar{
  position:absolute;inset:0 0 auto;z-index:40;
  display:flex;align-items:center;gap:26px;
  max-width:var(--wrap);margin-inline:auto;
  padding:16px var(--gut);
}
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.brand img{width:186px;height:auto}

.nav{display:none;margin-left:auto}
.nav > ul{display:flex;align-items:center;gap:22px}
.nav li{position:relative}
.nav a{
  font:500 15px/1 var(--body);color:var(--bark);text-decoration:none;
  padding-block:6px;border-bottom:1.5px solid transparent;white-space:nowrap;
}
.nav a:hover{border-bottom-color:var(--gold)}
.nav [aria-current="page"]{border-bottom-color:var(--gold)}

/* ---------- the one submenu ----------
   No script. :hover opens it for a pointer and :focus-within opens it for a
   keyboard: focusing the parent link is focus inside the li, so the panel is
   already visible by the time the next Tab has to land in it. visibility
   rather than display, so the closed panel is genuinely out of the tab order
   and the open one can still animate. */
.nav__has > a{display:inline-flex;align-items:center;gap:7px}
.nav__has > a::after{
  content:"";width:6px;height:6px;flex:none;margin-top:-3px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);
}
.nav__sub{
  position:absolute;top:calc(100% + 10px);left:-18px;z-index:50;
  min-width:216px;padding:7px 0;
  background:var(--paper);border:1px solid var(--rule);border-radius:3px;
  box-shadow:var(--lift);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease;
}
/* The 10px above the panel belongs to nobody. The li is only as tall as its
   link (an absolutely-positioned panel adds no height to it), so a pointer
   travelling from the label down to the first item crossed a strip that was
   outside both, :hover dropped, and the menu shut before it could be used.
   This bridges the strip from inside the panel: hovering a child keeps :hover
   on the li, and because the bridge inherits the panel's own visibility it
   cannot become an invisible hover trap while the menu is closed. */
.nav__sub::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:10px;
}
.nav__has:hover > .nav__sub,
.nav__has:focus-within > .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub a{
  display:block;padding:10px 18px;
  border-bottom:0;font-weight:400;color:var(--bark);white-space:nowrap;
}
.nav__sub a:hover{background:var(--sand-pale);color:var(--gold-dk);border-bottom:0}
@media (prefers-reduced-motion:reduce){.nav__sub{transition:none}}

.head-cta{margin-left:auto;display:none;align-items:center;gap:12px}
.nav + .head-cta{margin-left:0}

.navtoggle{
  margin-left:auto;display:inline-flex;align-items:center;gap:9px;
  background:transparent;border:1.5px solid var(--gold);border-radius:3px;
  padding:11px 15px;font:600 14px/1 var(--body);color:var(--bark);cursor:pointer;
}
.navtoggle svg{width:16px;height:16px}

/* ---------- the masthead over a dark hero ----------
   It is absolutely positioned over whatever the page opens with, and it was
   drawn for the painted dunes. /packages/ opens on the night, so the top-level
   links, the Menu button and the logo all flip. Only the top level: the
   submenu is a light panel and keeps its dark text. Set by jonshan_dark_head()
   in functions.php, which also picks the light logo. */
.dark-head .nav > ul > li > a{color:var(--cream)}
.dark-head .nav > ul > li > a:hover,
.dark-head .nav > ul > li > [aria-current="page"]{border-bottom-color:var(--sun)}
.dark-head .nav__has > a::after{border-color:var(--ochre)}
.dark-head .navtoggle{color:var(--cream);border-color:rgba(246,236,214,.45)}
.dark-head .navtoggle:hover{background:rgba(246,236,214,.1)}

/* Was 1060, sized for seven items plus the logo and the booking button. The nav
   is four items and a caret now, which fits comfortably by 860, so laptops and
   large tablets between 860 and 1060 get the real nav instead of the Menu
   panel. */
@media (min-width:860px){
  .nav{display:flex}
  .head-cta{display:flex}
  .navtoggle{display:none}
}
/* Below the nav breakpoint the masthead carries the logo and Menu only: the
   sticky rail at the foot of the screen already holds WhatsApp, and two
   booking buttons on one phone screen is one too many. */
@media (max-width:600px){.brand img{width:150px}}

/* slide-down panel on small screens */
.navpanel{
  position:fixed;inset:0 0 auto;z-index:60;
  background:var(--paper);border-bottom:1px solid var(--rule);
  padding:18px var(--gut) 26px;
  box-shadow:var(--lift);
  transform:translateY(-102%);
  transition:transform .28s ease;
}
.navpanel[data-open="1"]{transform:none}
.navpanel__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.navpanel__top img{width:160px}
.navpanel a.np{
  display:block;padding:13px 0;border-bottom:1px solid var(--rule);
  font:500 17px/1 var(--body);color:var(--bark);text-decoration:none;
}
/* The submenu is simply always open in the panel: there is room, and a second
   tap to reveal three links is a worse trade than three extra rows. */
.navpanel a.np--sub{
  padding-left:18px;font-size:15.5px;font-weight:400;color:var(--muted);
}
.navpanel a.np--sub:hover{color:var(--bark)}
.navpanel .btns{margin-top:20px}
.navclose{
  background:transparent;border:0;cursor:pointer;color:var(--bark);
  font:600 14px/1 var(--body);padding:10px;
}
@media (prefers-reduced-motion:reduce){.navpanel{transition:none}}

/* ---------- footer ---------- */
.foot{background:var(--bark-3);color:var(--cream);padding-block:clamp(48px,6vw,76px)}
.foot a{color:var(--ochre);text-decoration:none}
.foot a:hover{color:var(--sun);text-decoration:underline}
.foot__grid{display:grid;gap:38px}
.foot__logo img{width:196px;margin-bottom:18px}
.foot h4{font-size:17px;margin-bottom:14px;color:var(--cream);font-variation-settings:'opsz' 30,'SOFT' 30,'WONK' 0}
.foot li{margin-bottom:9px;font-size:15px;color:var(--muted-lt)}
.foot__base{
  margin-top:42px;padding-top:22px;border-top:1px solid var(--rule-dk);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:13.5px;color:var(--muted-lt);
}
@media (min-width:720px){.foot__grid{grid-template-columns:1.5fr 1fr 1fr}}
/* Clear the floating button, so it never comes to rest on the last footer line. */
@media (max-width:640px){.foot{padding-bottom:calc(84px + env(safe-area-inset-bottom))}}

/* ---------- floating WhatsApp button ----------
   Replaces the sticky bottom rail. The rail spanned the full width of a phone
   screen and only appeared there; this is one target, in the same place, at
   every size, and it leaves the page's own CTAs to do the persuading.

   It carries the label on wider screens and collapses to the mark on a phone,
   where the screen edge is scarce and the glyph alone is unambiguous. */
.wafab{
  position:fixed;right:18px;bottom:18px;z-index:60;
  display:inline-flex;align-items:center;gap:11px;
  height:58px;padding:0 19px;
  background:var(--wa);color:#fff;
  border-radius:999px;text-decoration:none;
  font:600 15px/1 var(--body);
  box-shadow:0 4px 10px rgba(61,35,13,.18),0 14px 34px -10px rgba(7,94,50,.5);
  transition:background-color .18s,transform .18s,box-shadow .18s;
}
.wafab svg{width:29px;height:29px;flex:none}
.wafab:hover{
  background:#1EAF55;color:#fff;transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(61,35,13,.2),0 18px 40px -10px rgba(7,94,50,.55);
}
.wafab:active{transform:none}

/* On a phone the label goes and the button becomes a circle. */
@media (max-width:640px){
  .wafab{right:14px;bottom:14px;width:56px;height:56px;padding:0;justify-content:center}
  .wafab__t{display:none}
}
@media (prefers-reduced-motion:reduce){
  .wafab,.wafab:hover{transition:none;transform:none}
}