/* ============================================================================
   Mamamia Jaisalmer -- foundations.

   Palette is sampled from the logo and then corrected for contrast, which
   changed two things worth knowing before editing:

   - Gold (#D9A441) scores 2.13 against the cream ground. It is never text on
     cream. It draws hairlines, rules and icon fills, and it only becomes type
     inside the indigo footer, where it reaches 6.41.
   - The logo orange (#D07237) scores 3.23 on cream and 3.42 under white. It is
     the brand's colour but not a usable text colour, so anything that has to be
     read -- button labels, inline links -- uses --brand-ink (#A85024, 5.18 and
     5.47). The two are not interchangeable.
   ========================================================================== */

@font-face {
	font-family: 'Fraunces';
	src: url('../fonts/fraunces-latin.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Quicksand';
	src: url('../fonts/quicksand-latin.woff2') format('woff2-variations');
	font-weight: 300 700;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* ground */
	--sand:      #FDF8F0;
	--sand-2:    #F6ECDD;
	--sand-3:    #EFE2CE;
	--paper:     #FFFFFF;

	/* ink */
	--ink:       #192A44;
	--ink-70:    #4A5A73;
	--ink-50:    #77839A;

	/* brand */
	--brand:     #D07237;   /* logo orange -- shapes, rules, never small text */
	--brand-ink: #A85024;   /* the readable orange */
	--saffron:   #F67922;
	--gold:      #D9A441;
	--gold-lt:   #E3B863;
	--teal:      #2E7D93;
	--teal-ink:  #256777;

	--line:      #E8DCC8;
	--line-2:    #DCCBAE;

	/* type */
	--ui:   'Quicksand', ui-rounded, 'Segoe UI', system-ui, sans-serif;
	--disp: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

	--t-xs:   .8125rem;
	--t-sm:   .9375rem;
	--t-base: 1.0625rem;
	--t-md:   1.1875rem;
	--t-lg:   1.375rem;
	--t-xl:   clamp(1.5rem, 2.1vw, 1.8rem);
	--t-2xl:  clamp(1.95rem, 3.5vw, 2.85rem);
	--t-3xl:  clamp(2.4rem, 5.6vw, 4.05rem);

	/* measure + rhythm */
	--wrap:   1180px;
	--gut:    clamp(1rem, 4vw, 2.5rem);
	--band:   clamp(4.5rem, 8vw, 7.5rem);

	--mast-h: 78px;
	--ease:   cubic-bezier(.22, .61, .36, 1);

	/* The jharokha, as a mask cap of fixed height.
	   clip-path in objectBoundingBox units scales the whole shape to each
	   element's aspect ratio, which smeared the arch flat on a landscape hero
	   and stretched it into a dome on a portrait room card. As a top mask layer
	   over a plain rectangle the profile stretches horizontally -- real ones are
	   wide -- and never vertically. Set --cap per component. */
	--arch: url("data:image/svg+xml,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20200%2044%22%20preserveAspectRatio=%22none%22><path%20fill=%22%23000%22%20d=%22M0%2C44%20L0%2C44.0%20C0%2C32.8%207.6%2C27.81%2023.0%2C25.93%20C43.0%2C23.73%2060.0%2C10.91%2081.0%2C2.86%20C90.0%2C0.94%2093.6%2C0.0%20100.0%2C0.0%20C106.4%2C0.0%20110.0%2C0.94%20119.0%2C2.86%20C140.0%2C10.91%20157.0%2C23.73%20177.0%2C25.93%20C192.4%2C27.81%20200%2C32.8%20200%2C44.0%20L200%2C44%20Z%22/></svg>");
	--cap:  44px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--mast-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	padding-top: calc(var(--mast-h) + 1px);
	background: var(--sand);
	color: var(--ink);
	font: 400 var(--t-base)/1.68 var(--ui);
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
	font-family: var(--disp);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -.018em;
	margin: 0 0 .5em;
	text-wrap: balance;
	font-variation-settings: 'opsz' 96, 'SOFT' 18;
}
h1 { font-size: var(--t-3xl); line-height: 1.02; letter-spacing: -.026em; font-variation-settings: 'opsz' 132, 'SOFT' 24; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); letter-spacing: -.012em; font-variation-settings: 'opsz' 48, 'SOFT' 14; }
h4 { font-size: var(--t-lg); letter-spacing: -.008em; font-variation-settings: 'opsz' 32, 'SOFT' 10; }

p { margin: 0 0 1.15em; max-width: 66ch; }
p:last-child { margin-bottom: 0; }

.lede {
	font-size: var(--t-md);
	line-height: 1.62;
	color: var(--ink-70);
	max-width: 54ch;
}

a { color: var(--brand-ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--saffron); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.1em; }

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

.skip {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--ink); color: var(--sand);
	padding: .8rem 1.2rem; font-weight: 600;
}
.skip:focus { left: .5rem; top: .5rem; }

/* Rupees. Tabular figures so a column of rates lines up on the sign. */
.rs { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs i { font-style: normal; margin-right: .12em; opacity: .62; font-size: .86em; }

/* ── Layout primitives ────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.band { padding-block: var(--band); position: relative; }
.band--tint { background: var(--sand-2); }
.band--paper { background: var(--paper); }

/* Section openers are left-aligned and carry a gold rule that starts at the
   text edge rather than centring under it -- the page reads as a column of
   left-hung sections, not a stack of centred slides. */
.lead { max-width: 62ch; margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }
.lead h2 { margin-bottom: 0; }
.lead p { color: var(--ink-70); margin-top: 1.15rem; }

/* The gold rule under a section heading. Spacing in rem, not em: in em it
   scaled with a 45px heading and opened a ~90px hole between the heading and
   its own first line of body copy. */
.lead h2::after {
	content: ''; display: block; width: 58px; height: 2px;
	background: var(--gold); margin: .7rem 0 0;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
	display: inline-flex; align-items: center; gap: .55em;
	white-space: nowrap;
	font: 600 var(--t-sm)/1 var(--ui);
	padding: .95em 1.5em;
	border: 1.5px solid transparent;
	border-radius: 2px 2px 0 0;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn svg { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }

.btn--primary { background: var(--brand-ink); color: var(--paper); }
.btn--primary:hover { background: var(--ink); color: var(--paper); }

.btn--wa { background: var(--brand-ink); color: var(--paper); }
.btn--wa:hover { background: var(--ink); color: var(--paper); }

.btn--ghost { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: transparent; }

.btn--lg { font-size: var(--t-base); padding: 1.05em 1.75em; }

/* ── The arch ─────────────────────────────────────────────────────────────── */
/* One shape, everywhere a photograph appears. The frame carries a sandstone
   ground so the clip still reads while the image decodes. */
.arch { margin: 0; }
.arch__frame,
.room__pic .arch__frame,
.trip__pic {
	display: block;
	position: relative;
	background: var(--sand-3);
	overflow: hidden;
	-webkit-mask-image: var(--arch), linear-gradient(#000, #000);
	        mask-image: var(--arch), linear-gradient(#000, #000);
	-webkit-mask-size: 100% var(--cap), 100% calc(100% - var(--cap) + 1px);
	        mask-size: 100% var(--cap), 100% calc(100% - var(--cap) + 1px);
	-webkit-mask-position: top left, bottom left;
	        mask-position: top left, bottom left;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
}
.arch__frame img { width: 100%; height: 100%; object-fit: cover; }
.arch figcaption {
	margin-top: .9rem;
	font-size: var(--t-sm);
	color: var(--ink-70);
	max-width: 40ch;
}

/* ── Google rating ────────────────────────────────────────────────────────── */
.gchip {
	display: inline-flex; align-items: center; gap: .5em;
	font: 500 var(--t-sm)/1 var(--ui);
	color: var(--ink); text-decoration: none;
	padding: .55em .85em .55em .6em;
	border: 1px solid var(--line-2);
	background: var(--paper);
	border-radius: 2px;
}
.gchip:hover { border-color: var(--gold); color: var(--ink); }
.gchip__g { width: 1.05em; height: 1.05em; flex: none; }
.gchip b { font-weight: 700; font-size: 1.05em; }
.gchip__stars { color: var(--gold); letter-spacing: .05em; font-size: .92em; }
.gchip__n { color: var(--ink-70); }
.gchip--sm { background: transparent; border-color: rgba(217, 164, 65, .34); color: var(--sand); }
.gchip--sm:hover { border-color: var(--gold); color: var(--sand); }
.gchip--sm .gchip__n { color: var(--ink-50); }

/* ── Masthead ─────────────────────────────────────────────────────────────── */
/* The page opens on cream, not on a photograph, so the masthead never has to
   invert. It only gains a hairline and a shadow once the page has moved. */
.mast {
	position: fixed; top: 0; left: 0; right: 0; z-index: 60;
	background: var(--sand);
	border-bottom: 1px solid transparent;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.mast.is-stuck {
	border-bottom-color: var(--line);
	box-shadow: 0 1px 0 rgba(25, 42, 68, .04), 0 10px 26px -22px rgba(25, 42, 68, .5);
	background: var(--sand);
}
.mast__in {
	max-width: var(--wrap); margin-inline: auto;
	padding-inline: var(--gut);
	min-height: var(--mast-h);
	display: flex; align-items: center; gap: 1.5rem;
}
.mast__logo { display: block; flex: none; line-height: 0; }
.mast__logo img { width: 194px; height: auto; }

.mast__burger { display: none; }

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.nav__list {
	display: flex; align-items: center; gap: clamp(.85rem, 1.9vw, 1.7rem);
	list-style: none; margin: 0; padding: 0;
}
.nav__item { position: relative; }
.nav__item > a {
	display: block; padding: .55rem 0;
	font: 500 var(--t-sm)/1 var(--ui);
	color: var(--ink); text-decoration: none;
	position: relative; white-space: nowrap;
}
.nav__item > a::after {
	content: ''; position: absolute; left: 0; right: 100%; bottom: .18rem;
	height: 1.5px; background: var(--brand);
	transition: right .24s var(--ease);
}
.nav__item > a:hover { color: var(--ink); }
.nav__item > a:hover::after,
.nav__item:focus-within > a::after { right: 0; }

.nav__item--has > a::after { right: 100%; }

.nav__sub {
	position: absolute; top: calc(100% + .1rem); left: -1rem;
	min-width: 15.5rem;
	background: var(--paper);
	border: 1px solid var(--line);
	box-shadow: 0 18px 44px -26px rgba(25, 42, 68, .55);
	list-style: none; margin: 0; padding: .4rem;
	opacity: 0; visibility: hidden; transform: translateY(-4px);
	transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__sub a {
	display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
	padding: .58rem .75rem;
	font: 500 var(--t-sm)/1.3 var(--ui);
	color: var(--ink); text-decoration: none;
}
.nav__sub a:hover { background: var(--sand-2); color: var(--ink); }
.nav__sub b { font-weight: 600; color: var(--brand-ink); font-size: var(--t-xs); }

.nav__foot { display: flex; align-items: center; gap: 1.1rem; }
.nav__tel {
	display: inline-flex; align-items: center; gap: .45em;
	flex: none;
	font: 600 var(--t-sm)/1 var(--ui);
	color: var(--ink); text-decoration: none; white-space: nowrap;
}
.nav__tel svg { width: 1em; height: 1em; fill: var(--brand); }
.nav__tel:hover { color: var(--brand-ink); }

.nav__x { display: none; }

.nav__scrim {
	position: fixed; inset: 0; z-index: 55;
	background: rgba(25, 42, 68, .42);
	opacity: 0; transition: opacity .26s var(--ease);
}
.nav__scrim.is-on { opacity: 1; }

/* ── Masthead, small screens ──────────────────────────────────────────────── */
/* The phone number is the first thing to go when the row gets tight; it is
   still in the nav sheet, the footer and the closing band. */
@media (max-width: 1220px) { .nav__tel { display: none; } }

@media (max-width: 1040px) {
	:root { --mast-h: 66px; }
	.mast__logo img { width: 168px; }

	.mast__burger {
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		gap: 4px; margin-left: auto;
		width: 46px; height: 44px; padding: 0;
		background: none; border: 0; cursor: pointer; color: var(--ink);
	}
	.mast__burger span {
		display: block; width: 21px; height: 1.5px; background: currentColor;
		transition: transform .26s var(--ease), opacity .2s var(--ease);
	}
	.mast__burger em { font: 600 .625rem/1 var(--ui); letter-spacing: .06em; margin-top: 2px; font-style: normal; }
	.mast__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
	.mast__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.mast__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

	.nav {
		position: fixed; top: 0; right: 0; z-index: 58;
		width: min(23rem, 88vw); height: 100dvh;
		background: var(--sand);
		border-left: 1px solid var(--line);
		margin: 0; padding: calc(var(--mast-h) + 1.5rem) 1.6rem 2rem;
		flex-direction: column; align-items: stretch; gap: 0;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform .3s var(--ease);
	}
	.nav.is-open { transform: none; }

	/* Sits on the burger's own position so it reads as the same control being
	   pressed again, at a 44px tap target. */
	/* Labelled, because the burger it replaces is labelled: a bare glyph is
	   the one thing on this masthead a visitor has to guess at. Same footprint
	   and same position as the burger, so it reads as the same control. */
	.nav__x {
		position: absolute; top: calc((var(--mast-h) - 44px) / 2); right: 1.1rem;
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		gap: 3px; width: 46px; height: 44px; padding: 0;
		background: none; border: 0; cursor: pointer;
		color: var(--ink);
	}
	.nav__x svg { width: 21px; height: 21px; }
	.nav__x em {
		font: 600 .625rem/1 var(--ui); letter-spacing: .06em; font-style: normal;
	}
	.nav__x:hover { color: var(--brand-ink); }

	.nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav__item { border-bottom: 1px solid var(--line); }
	.nav__item > a {
		padding: .95rem 0;
		font-family: var(--disp); font-size: var(--t-lg); font-weight: 400;
		font-variation-settings: 'opsz' 40, 'SOFT' 12;
	}
	.nav__item > a::after { display: none; }
	.nav__item--has > a::before { display: none; }

	.nav__sub {
		position: static; opacity: 1; visibility: visible; transform: none;
		border: 0; box-shadow: none; background: transparent;
		padding: 0 0 .85rem .1rem; min-width: 0;
	}
	.nav__sub a { padding: .42rem 0; color: var(--ink-70); }
	.nav__sub a:hover { background: transparent; }

	.nav__foot { flex-direction: column; align-items: stretch; gap: .9rem; margin-top: 1.8rem; }
	.nav__tel { display: inline-flex; justify-content: center; padding: .7rem; border: 1px solid var(--line-2); }
	.nav__foot .btn { justify-content: center; }
}
@media (min-width: 1041px) { .nav__scrim { display: none; } }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.foot {
	position: relative;
	margin-top: clamp(4rem, 8vw, 7rem);
	background: var(--ink);
	color: var(--sand);
}
/* The fort wall, in low relief. Jaisalmer's is a run of battered drum towers
   between merlon-topped curtain; at 34px it reads as an edge, not a graphic. */
.foot__crest {
	position: absolute; left: 0; right: 0; top: -33px; height: 34px;
	background: url('../img/fortline.svg') repeat-x bottom;
	background-size: 1400px 34px;
	pointer-events: none;
}
.foot__in {
	max-width: var(--wrap); margin-inline: auto;
	padding: clamp(3.4rem, 6vw, 5rem) var(--gut) clamp(2.4rem, 4vw, 3.4rem);
	display: grid; gap: clamp(2rem, 4vw, 3rem);
	grid-template-columns: 1.35fr 1fr 1fr 1.15fr;
}
.foot__logo { width: 228px; margin-bottom: 1.15rem; }
.foot__blurb { color: #A8B4C6; font-size: var(--t-sm); max-width: 34ch; margin-bottom: 1.3rem; }

.foot__col h2 {
	font-family: var(--ui); font-size: var(--t-xs); font-weight: 700;
	letter-spacing: .04em; color: var(--gold-lt);
	margin: 0 0 1rem; padding-bottom: .6rem;
	border-bottom: 1px solid rgba(217, 164, 65, .22);
	font-variation-settings: normal;
}
.foot__col .foot__h2b { margin-top: 2.3rem; }
.foot__col ul { list-style: none; margin: 0; padding: 0; }
.foot__col li + li { margin-top: .58rem; }
.foot__col a { color: var(--sand); text-decoration: none; font-size: var(--t-sm); }
.foot__col a:hover { color: var(--gold-lt); }

.foot__rates a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.foot__rates b { font-weight: 600; color: #A8B4C6; font-size: var(--t-xs); }
.foot__rates a:hover b { color: var(--gold-lt); }
.foot__note { margin-top: .85rem; font-size: var(--t-xs); color: var(--ink-50); }

.foot__find address { font-style: normal; font-size: var(--t-sm); color: #A8B4C6; margin-bottom: 1.1rem; line-height: 1.6; }
.foot__contact li + li { margin-top: .55rem; }
.foot__contact a { display: inline-flex; align-items: center; gap: .5em; }
.foot__contact svg { width: .95em; height: .95em; fill: var(--gold); flex: none; }
.foot__times {
	display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem;
	margin: 1.3rem 0 0; padding-top: 1.1rem;
	border-top: 1px solid rgba(217, 164, 65, .18);
	font-size: var(--t-xs);
}
.foot__times dt { color: var(--ink-50); }
.foot__times dd { margin: 0; color: var(--sand); }

.foot__bar {
	max-width: var(--wrap); margin-inline: auto;
	padding: 1.3rem var(--gut) 2.2rem;
	border-top: 1px solid rgba(168, 180, 198, .16);
	display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: center;
	font-size: var(--t-xs); color: var(--ink-50);
}
.foot__bar p { margin: 0; }
.foot__bar ul { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none; margin: 0 0 0 auto; padding: 0; }
.foot__bar a { color: var(--ink-50); text-decoration: none; }
.foot__bar a:hover { color: var(--gold-lt); }

@media (max-width: 900px) {
	.foot__in { grid-template-columns: 1fr 1fr; }
	.foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.foot__in { grid-template-columns: 1fr; }
	.foot__bar ul { margin-left: 0; }
}

/* ── Floating contact ─────────────────────────────────────────────────────── */
/* Most enquiries to this property arrive by phone or WhatsApp, so both are
   permanent rather than hidden behind a contact page. Phone sits on top: it is
   the one that works when a guest has no data. */
.fabs {
	position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 50;
	display: flex; flex-direction: column; align-items: flex-end; gap: .55rem;
}
.fab {
	display: inline-flex; align-items: center; gap: .55em;
	padding: .85em 1.15em;
	color: #fff; text-decoration: none;
	font: 600 var(--t-sm)/1 var(--ui);
	border-radius: 2px;
	transition: transform .2s var(--ease);
}
.fab svg { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
.fab:hover { color: #fff; transform: translateY(-2px); }

.fab--tel { background: var(--brand-ink); box-shadow: 0 12px 30px -14px rgba(168, 80, 36, .85); }
.fab--wa  { background: #128C4A;          box-shadow: 0 12px 30px -14px rgba(18, 140, 74, .85); }

@media (max-width: 560px) {
	.fabs { right: .75rem; bottom: .75rem; gap: .5rem; }
	.fab { padding: .9em; }
	.fab span { display: none; }
}