/* ============================================================================
   The gallery.

   One day at the hotel, read downwards. The ground darkens section by section
   -- cream for the rooms, sand for the house, deeper sand for the desert, and
   the footer's indigo for the camp after dark -- so scrolling the page is
   scrolling through an afternoon. That is the only thing this stylesheet does
   loudly; everything else is the homepage's own furniture.

   Loaded after home.css and borrows from it: .lead, .btn, .arch__frame,
   .room__head, .close and the lightbox are all the homepage's.
   ========================================================================== */

/* The masthead is fixed and the section bar sticks under it, so an anchor
   jump has two bars to clear rather than one. */
html { scroll-padding-top: calc(var(--mast-h) + 4rem); }

/* ── Opening ──────────────────────────────────────────────────────────────── */
.gtop { padding-block: clamp(2.2rem, 4.5vw, 3.6rem) clamp(1.8rem, 3.5vw, 2.8rem); }

.gtop__say {
	display: grid; grid-template-columns: 1.06fr .94fr;
	gap: clamp(1.4rem, 4vw, 3.5rem); align-items: end;
}
.gtop__say h1 { margin-bottom: 0; }
.gtop__say .lede { max-width: 46ch; margin-bottom: .35rem; }

/* The table of contents is four jharokha windows: the section's own lead
   photograph in the arch, its name under it. On a phone they go two by two
   rather than into a rail -- this is the page's navigation, so all four
   should be on screen at once. */
.gindex {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 2.4vw, 2rem);
	list-style: none; margin: clamp(1.8rem, 3.5vw, 2.8rem) 0 0; padding: 0;
}
.gindex a { display: block; text-decoration: none; color: var(--ink); }
.gindex .arch__frame { aspect-ratio: 3 / 3.9; --cap: 40px; }
.gindex img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: var(--pos, 50% 50%);
	transition: transform .5s var(--ease);
}
.gindex a:hover img { transform: scale(1.045); }
.gindex b {
	display: block; margin-top: .85rem;
	font-family: var(--disp); font-weight: 400; font-size: var(--t-lg);
	letter-spacing: -.012em; line-height: 1.14;
	font-variation-settings: 'opsz' 32, 'SOFT' 12;
}
.gindex a:hover b { color: var(--brand-ink); }
.gindex span { display: block; margin-top: .3rem; font-size: var(--t-xs); color: var(--ink-50); }

@media (max-width: 900px) {
	.gtop__say { grid-template-columns: 1fr; gap: 1.1rem; align-items: start; }
	.gtop__say .lede { margin-bottom: 0; }
}
@media (max-width: 700px) {
	.gindex { grid-template-columns: 1fr 1fr; gap: 1.2rem 1.1rem; }
	.gindex .arch__frame { aspect-ratio: 3 / 3.3; --cap: 30px; }
	.gindex b { font-size: var(--t-md); }
}

/* ── The section bar ──────────────────────────────────────────────────────── */
/* Plain anchor links that keep working with the script gone; gallery.js only
   marks which section you are in. It stays cream over the indigo band: it is
   the page's chrome, not part of the night. */
.gbar {
	position: sticky; top: var(--mast-h); z-index: 40;
	background: var(--sand);
	border-block: 1px solid var(--line);
}
.gbar ul {
	display: flex; align-items: center; gap: clamp(1.1rem, 2.6vw, 2.4rem);
	list-style: none; margin: 0; padding: 0;
	overflow-x: auto; overscroll-behavior-x: contain;
	scrollbar-width: none; -ms-overflow-style: none;
}
.gbar ul::-webkit-scrollbar { display: none; }
.gbar a {
	display: block; padding: .85rem 0;
	font: 500 var(--t-sm)/1 var(--ui);
	color: var(--ink-70); text-decoration: none; white-space: nowrap;
	border-bottom: 2px solid transparent; margin-bottom: -1px;
	transition: color .18s var(--ease), border-color .18s var(--ease);
}
.gbar a:hover { color: var(--ink); }
.gbar a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--brand); }

/* The row scrolls to the screen edge on a phone rather than stopping at the
   gutter, so it reads as something that moves. */
@media (max-width: 760px) {
	.gbar .wrap { padding-inline: 0; }
	.gbar ul { padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
}

/* ── Sections ─────────────────────────────────────────────────────────────── */
.gsec { padding-block: clamp(2.8rem, 5.5vw, 4.5rem); }
.gsec--rooms  { background: var(--sand); }
.gsec--house  { background: var(--sand-2); }
.gsec--desert { background: var(--sand-3); }

.gsec__head {
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
	gap: 1.1rem 2rem;
	margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem);
}
.gsec__head .lead { margin-bottom: 0; max-width: 54ch; }
.gsec__more { margin: 0; max-width: none; }

/* Each room's own set, under its name and rate on the homepage's ruled line.
   The room's own page is one tap from its photographs, which is where someone
   who has just looked at eight of them wants to go next. */
.grm + .grm { margin-top: clamp(2rem, 3.6vw, 3rem); }
.grm__head { margin-top: 0; gap: .5rem 1.4rem; }
.grm__name { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem 1rem; }
.grm__head h3 { font-size: var(--t-lg); }
.grm__see { font: 600 var(--t-sm)/1 var(--ui); white-space: nowrap; }

/* ── Justified rows ───────────────────────────────────────────────────────── */
/* No photograph is cropped to fit a grid. Each tile's basis and its growth are
   both proportional to its own aspect ratio, which is what keeps every tile in
   a row the same height while none of them is cut. The greedy spacer stops the
   last row stretching its few tiles across the full width. */
.gjr {
	display: flex; flex-wrap: wrap; gap: .6rem;
	list-style: none; margin: 1.1rem 0 0; padding: 0;
	--gjr-h: 14.5rem;
}
/* The greedy spacer keeps the last row at its natural size instead of blowing
   three photographs up across the full width. A room with one or two of them
   gets .gjr--few below rather than a bigger share of the leftover, which would
   have made whichever photograph happened to fall last into a feature. */
.gjr::after { content: ''; flex-grow: 9999; flex-basis: 0; }
.gjr__i {
	--r: 1.3333;
	flex-grow: var(--r); flex-shrink: 1;
	flex-basis: calc(var(--r) * var(--gjr-h));
	min-width: 0;
}
.gjr__i a {
	display: block; position: relative; overflow: hidden;
	aspect-ratio: var(--r);
	background: var(--sand-3);
}
.gjr__i img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .55s var(--ease);
}
.gjr__i a:hover img { transform: scale(1.045); }

/* A set of one or two photographs stands taller, so it does not read as a
   leftover beside a room with eight. */
.gjr--few { --gjr-h: 20rem; }

@media (max-width: 900px) { .gjr { --gjr-h: 12rem; } .gjr--few { --gjr-h: 17rem; } }
@media (max-width: 640px) { .gjr { --gjr-h: 9.5rem; gap: .45rem; } .gjr--few { --gjr-h: 15rem; } }

/* ── After dark ───────────────────────────────────────────────────────────── */
/* The last section is on the footer's indigo, and the desert band ends in a
   dune horizon rather than a straight edge -- the same trick as the fort wall
   above the footer. Nothing on this band is allowed to use --brand-ink: it
   scores 2.6 against the indigo. Gold and cream do the work instead. */
.gsec--night {
	position: relative;
	background: var(--ink); color: var(--sand);
}
.gsec--night::before {
	content: ''; position: absolute; left: 0; right: 0; top: -45px; height: 46px;
	background: url("data:image/svg+xml,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201200%2046%22%20preserveAspectRatio=%22none%22><path%20fill=%22%23192A44%22%20d=%22M0%2C46%20L0%2C31%20C110%2C14%20215%2C7%20336%2C20%20C418%2C29%20486%2C34%20566%2C25%20C664%2C14%20764%2C3%20884%2C13%20C986%2C22%201082%2C35%201200%2C31%20L1200%2C46%20Z%22/></svg>") repeat-x bottom;
	background-size: 1200px 46px;
	pointer-events: none;
}
.gsec--night h2 { color: var(--sand); }
.gsec--night .lead p { color: #A8B4C6; }
.gsec--night .btn--ghost { border-color: rgba(217, 164, 65, .42); color: var(--sand); }
.gsec--night .btn--ghost:hover { border-color: var(--gold-lt); color: var(--gold-lt); }
.gsec--night .gjr__i a { background: rgba(253, 248, 240, .08); }
.gsec--night :focus-visible { outline-color: var(--gold-lt); }