/* ============================================================================
   The desert safari page.

   Three trips in the order of the sun, and the page follows the sky: the
   opening draws the sun's path coming down across the three of them, the
   jeep is on afternoon sand, the camel section darkens to a dusk that ends in
   the sun going down behind a dune, and the camp is on the footer's indigo.
   That sunset is the one loud thing here; everything else is the homepage's
   furniture -- .lead, .btn, .arch__frame, .ask__f, .faq, .close and the
   stepping lightbox all come from home.css, which loads first.

   Two colours are added, both checked against the grounds they sit on:
   - --dusk #F2D6BC, the camel section's ground. --brand-ink drops to 3.94 on
     it, so links there and on the afternoon sand (4.28) use --brand-deep
     #8A3F1B (5.39 and 5.86). --ink-70 holds at 5.04.
   - the afterglow and the sun itself, which carry no text at all.
   ========================================================================== */

.spage {
	--dusk:       #F2D6BC;
	--brand-deep: #8A3F1B;
	--night-70:   #A8B4C6;
}

/* Two bars to clear on an anchor jump: the masthead and the trip bar. */
html { scroll-padding-top: calc(var(--mast-h) + 4.2rem); }

/* ── Opening ──────────────────────────────────────────────────────────────── */
.shero { padding-block: clamp(2.2rem, 4.5vw, 3.8rem) clamp(2.6rem, 5vw, 4rem); }
.shero__in {
	display: grid; grid-template-columns: 1.2fr .8fr;
	gap: clamp(1.4rem, 4vw, 3.5rem); align-items: end;
}
.shero__say h1 { margin-bottom: .3em; }
.shero__say .lede { max-width: 50ch; margin-bottom: 0; }
.shero__proof {
	font-size: var(--t-sm); color: var(--ink-70);
	max-width: 32ch; margin-bottom: 1rem;
}
.shero__proof b {
	font-family: var(--disp); font-weight: 500; font-size: 1.35em;
	color: var(--brand-ink); line-height: 1;
	font-variant-numeric: lining-nums;
	font-variation-settings: 'opsz' 30, 'SOFT' 10;
}
.shero__acts { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }

@media (max-width: 900px) {
	.shero__in { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 560px) {
	.shero__acts .btn { flex: 1 1 100%; justify-content: center; }
}

/* ── The sun's path ───────────────────────────────────────────────────────── */
/* A diagram and the page's table of contents at once. The band above the
   arches is sky: a gold path -- one quarter of an ellipse centred on the
   left end of the horizon -- comes down to meet the horizon exactly under
   the middle stop, since that stop's centre is always half the width. The
   sun over the first stop sits on the path (18% of the band down, worked
   out for the column width); the second sits on the horizon; the third is
   the moon. */
.sky {
	position: relative;
	margin-top: clamp(2.2rem, 4.5vw, 3.4rem);
	--sky-h: clamp(4.4rem, 9vw, 7.4rem);
	--glyph: clamp(22px, 2.6vw, 34px);
}
.sky__arc {
	position: absolute; left: 0; right: 0; top: 0;
	height: var(--sky-h);
	overflow: hidden; pointer-events: none;
}
.sky__arc::before {
	content: ''; position: absolute;
	left: -50%; width: 100%;
	top: calc(var(--sky-h) * .14);
	height: calc(var(--sky-h) * 1.72);
	border: 1.5px solid var(--gold);
	border-radius: 50%;
	/* Drawn in once, from noon down to the horizon: the page's one
	   unprompted movement. The mask sweeps the quarter that shows. */
	-webkit-mask: conic-gradient(from 0deg at 50% 50%, #000 var(--sweep), transparent 0);
	        mask: conic-gradient(from 0deg at 50% 50%, #000 var(--sweep), transparent 0);
	animation: sky-draw 1.9s var(--ease) .25s both;
}
/* The horizon: a plain hairline, not gold -- the gold is the sun's. */
.sky__arc::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 0;
	height: 1px; background: var(--line-2);
}
@property --sweep { syntax: '<angle>'; inherits: false; initial-value: 90deg; }
@keyframes sky-draw { from { --sweep: 0deg; } to { --sweep: 90deg; } }

.sky__stops {
	position: relative;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(.8rem, 2.4vw, 2rem);
	list-style: none; margin: 0; padding: 0;
}
.sky__stop { position: relative; padding-top: calc(var(--sky-h) + clamp(.9rem, 1.8vw, 1.4rem)); }
.sky__stop a { display: block; color: var(--ink); text-decoration: none; }

.sky__body {
	position: absolute; left: 50%;
	width: var(--glyph); height: var(--glyph);
	transform: translate(-50%, -50%);
	color: var(--gold);
	animation: sky-show .5s var(--ease) both;
}
.sky__stop--sun  .sky__body { top: calc(var(--sky-h) * .183); animation-delay: .3s; }
/* The glyph's own horizon is 15/24 of the way down it; that line goes on the
   band's horizon. */
.sky__stop--set  .sky__body { top: calc(var(--sky-h) - var(--glyph) * .125); animation-delay: 1.9s; }
.sky__stop--moon .sky__body { top: calc(var(--sky-h) * .36); left: 58%; animation-delay: 2.3s; }
@keyframes sky-show { from { opacity: 0; } to { opacity: 1; } }

.sky__stop .arch__frame { aspect-ratio: 3 / 3.15; --cap: 42px; }
.sky__stop img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: var(--pos, 50% 50%);
	transition: transform .5s var(--ease);
}
.sky__stop a:hover img { transform: scale(1.045); }
.sky__stop b {
	display: block; margin-top: .9rem;
	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;
}
.sky__stop a:hover b { color: var(--brand-ink); }
.sky__when { display: block; margin-top: .3rem; font-size: var(--t-sm); color: var(--ink-70); }

@media (max-width: 700px) {
	.sky { --sky-h: 3.9rem; --glyph: 20px; }
	.sky__stop .arch__frame { aspect-ratio: 3 / 3.9; --cap: 24px; }
	.sky__stop b { font-size: var(--t-base); margin-top: .7rem; }
	.sky__when { font-size: var(--t-xs); }
}

/* ── The trip bar ─────────────────────────────────────────────────────────── */
/* The gallery's section bar, with each trip's glyph. Plain anchor links that
   work with the script gone; safari.js marks the trip you are in. It stays
   cream over the night: it is the page's chrome, not part of the sky. */
.sbar {
	position: sticky; top: var(--mast-h); z-index: 40;
	background: var(--sand);
	border-block: 1px solid var(--line);
}
.sbar__in { display: flex; align-items: center; gap: 1.2rem; }
.sbar ul {
	display: flex; align-items: center; gap: clamp(1.1rem, 2.6vw, 2.4rem);
	flex: 1 1 auto; min-width: 0;
	list-style: none; margin: 0; padding: 0;
	overflow-x: auto; overscroll-behavior-x: contain;
	scrollbar-width: none; -ms-overflow-style: none;
}
.sbar ul::-webkit-scrollbar { display: none; }
.sbar ul a {
	display: flex; align-items: center; gap: .5em;
	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);
}
.sbar ul svg { width: 1.15em; height: 1.15em; flex: none; color: var(--gold); }
.sbar ul a:hover { color: var(--ink); }
.sbar ul a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.sbar__go { flex: none; padding: .7em 1.1em; font-size: var(--t-xs); }

@media (max-width: 760px) {
	.sbar .wrap { padding-inline: 0; }
	.sbar ul { padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
	/* The floating buttons already carry WhatsApp on a phone. */
	.sbar__go { display: none; }
}

/* ── A trip ───────────────────────────────────────────────────────────────── */
/* Text left, photographs right, the same way for all three, so they compare
   by reading straight down -- the rooms page's argument. On a phone the two
   columns dissolve (display: contents) so the photographs can come in
   between the heading and the detail. */
.ssec { position: relative; padding-block: var(--band); }
.ssec__in {
	display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
	gap: clamp(2rem, 5.5vw, 5rem); align-items: start;
}

.ssec__when {
	display: flex; align-items: center; gap: .55em;
	margin: 0 0 .85rem;
	font: 600 var(--t-sm)/1 var(--ui); color: var(--ink-70);
}
.ssec__when svg { width: 1.7em; height: 1.7em; flex: none; color: var(--gold); }
.ssec__head h2 { margin-bottom: 0; }
.ssec__head h2::after {
	content: ''; display: block; width: 58px; height: 2px;
	background: var(--gold); margin: .7rem 0 0;
}
.ssec__head .lede { margin-top: 1.2rem; }
.ssec__body { margin-top: 1.4rem; }

.sfacts { margin: 1.9rem 0 0; border-top: 1px solid var(--line-2); max-width: 34rem; }
.sfacts div {
	display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); gap: 1rem;
	padding: .7rem 0; border-bottom: 1px solid var(--line-2);
	font-size: var(--t-sm); line-height: 1.45;
}
.sfacts dt { color: var(--ink-70); }
.sfacts dd { margin: 0; font-weight: 600; }
.sfacts dd small { font-weight: 500; color: var(--ink-70); font-size: 1em; }
.sfacts a { color: var(--brand-deep); }

.ssec__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.5rem; margin-top: 1.9rem; }
.ssec__plan { font: 600 var(--t-sm)/1.3 var(--ui); color: var(--brand-deep); }
.ssec__plan:hover { color: var(--ink); }

/* The rooms page's photo cluster: the lead in the arch over two rows, two
   more beside it. */
.spics {
	display: grid;
	grid-template-columns: 1.22fr 1fr; grid-template-rows: 1fr 1fr;
	gap: .65rem;
	aspect-ratio: 16 / 13.2;
	list-style: none; margin: 0; padding: 0;
}
.spic { position: relative; min-width: 0; min-height: 0; }
.spic[hidden] { display: none; }
.spic--lead { grid-row: 1 / span 2; }
.spic a { display: block; height: 100%; cursor: zoom-in; }
.spic .arch__frame { height: 100%; --cap: 50px; }
.spic__frame { display: block; height: 100%; position: relative; overflow: hidden; background: var(--sand-2); }
.spic img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: var(--pos, 50% 50%);
	transition: transform .5s var(--ease);
}
.spic a:hover img { transform: scale(1.035); }
.spic__more {
	position: absolute; left: .7rem; bottom: .7rem;
	padding: .55em .8em;
	background: var(--paper); color: var(--ink);
	font: 600 var(--t-xs)/1 var(--ui);
	border-radius: 2px;
	box-shadow: 0 6px 18px -10px rgba(25, 42, 68, .6);
}
.spic a:hover .spic__more { color: var(--brand-deep); }

.squote { margin: 1.7rem 0 0; padding-left: 1.3rem; border-left: 2px solid var(--gold); }
.squote p {
	font-family: var(--disp); font-size: var(--t-md); line-height: 1.5;
	font-variation-settings: 'opsz' 28, 'SOFT' 16;
	margin-bottom: .45rem; max-width: 46ch;
}
.squote cite { font-style: normal; font-size: var(--t-xs); color: var(--ink-70); }

@media (max-width: 900px) {
	.ssec__in { display: flex; flex-direction: column; gap: 0; }
	.ssec__l, .ssec__r { display: contents; }
	.ssec__head { order: 1; }
	.spics { order: 2; margin-top: 1.8rem; }
	.ssec__body { order: 3; margin-top: 1.8rem; }
	.squote { order: 4; margin-top: 2rem; }
	.spics { width: 100%; max-width: 36rem; }
}
@media (max-width: 560px) {
	.spics { grid-template-columns: 1.1fr 1fr; aspect-ratio: 4 / 4.1; gap: .5rem; }
	.spic .arch__frame { --cap: 34px; }
	.sfacts div { grid-template-columns: 6.6rem minmax(0, 1fr); gap: .8rem; }
	.ssec__acts .btn { flex: 1 1 100%; justify-content: center; }
}

/* ── Afternoon ────────────────────────────────────────────────────────────── */
/* The homepage's safari sand: the desert at four o'clock is the brightest
   thing in the story. */
.ssec--sun { background: var(--sand-3); }

/* ── Sunset ───────────────────────────────────────────────────────────────── */
/* The ground warms to dusk, and below the text the sky goes on into an
   afterglow with the sun half down behind the camp section's dune line. The
   glow is kept clear of text by the section's own bottom padding. */
.ssec--set {
	--glow-h: clamp(8rem, 15vw, 12.5rem);
	--sun-r:  clamp(1.7rem, 3.4vw, 2.9rem);
	background: linear-gradient(to bottom, var(--sand-3), var(--dusk) 34%);
	padding-bottom: calc(var(--band) + var(--glow-h) - 2rem);
}
.ssec--set::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 0;
	height: var(--glow-h);
	pointer-events: none;
	background:
		radial-gradient(circle at 70% calc(100% - 13px),
			#F5A64A 0 calc(var(--sun-r) - .5px),
			rgba(245, 166, 74, .38) calc(var(--sun-r) + .5px),
			rgba(245, 166, 74, 0) calc(var(--sun-r) * 3.2)),
		linear-gradient(to bottom, rgba(242, 214, 188, 0), #EDBC93 48%, #DE9670 80%, #C98069);
}
.ssec--set a:not(.btn) { color: var(--brand-deep); }

/* ── After dark ───────────────────────────────────────────────────────────── */
/* The footer's indigo, topped by a dune line drawn for this page: its low
   point is at 70% of the width, where the sun above is setting, and it
   stretches with the page so the two never drift apart. Nothing here uses
   --brand-ink (2.64 on indigo); sand, #A8B4C6 and gold do the work. */
.ssec--moon { background: var(--ink); color: var(--sand); }
.ssec--moon::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%2C22%20C120%2C9%20250%2C5%20380%2C16%20C470%2C24%20560%2C29%20650%2C25%20C730%2C21%20785%2C31%20840%2C33%20C905%2C35%20965%2C19%201050%2C11%20C1110%2C6%201160%2C8%201200%2C13%20L1200%2C46%20Z%22/></svg>") no-repeat bottom / 100% 46px;
	pointer-events: none;
}
.ssec--moon h2 { color: var(--sand); }
.ssec--moon .ssec__when { color: var(--night-70); }
.ssec--moon .ssec__when svg { color: var(--gold-lt); }
.ssec--moon .lede { color: var(--night-70); }
.ssec--moon .sfacts,
.ssec--moon .sfacts div { border-color: rgba(217, 164, 65, .24); }
.ssec--moon .sfacts dt,
.ssec--moon .sfacts dd small { color: var(--night-70); }
.ssec--moon a:not(.btn) { color: var(--gold-lt); }
.ssec--moon a:not(.btn):hover { color: var(--sand); }
/* On the night the WhatsApp button turns gold with indigo type (7.76). */
.ssec--moon .btn--wa { background: var(--gold-lt); color: var(--ink); }
.ssec--moon .btn--wa:hover { background: var(--sand); color: var(--ink); }
.ssec--moon .squote p { color: var(--sand); }
.ssec--moon .squote cite { color: var(--night-70); }
.ssec--moon .spic__frame,
.ssec--moon .arch__frame { background: rgba(253, 248, 240, .08); }
.ssec--moon :focus-visible { outline-color: var(--gold-lt); }
/* A night photograph's black sky would lose the arch against the indigo, so
   the lead gets the arch again in a gold hairline, a step larger behind it. */
.ssec--moon .spic--lead a { position: relative; }
.ssec--moon .spic--lead a::before {
	content: ''; position: absolute; inset: -2px;
	background: rgba(227, 184, 99, .6);
	-webkit-mask-image: var(--arch), linear-gradient(#000, #000);
	        mask-image: var(--arch), linear-gradient(#000, #000);
	-webkit-mask-size: 100% 52px, 100% calc(100% - 52px + 1px);
	        mask-size: 100% 52px, 100% calc(100% - 52px + 1px);
	-webkit-mask-position: top left, bottom left;
	        mask-position: top left, bottom left;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
}
@media (max-width: 560px) {
	.ssec--moon .spic--lead a::before {
		-webkit-mask-size: 100% 36px, 100% calc(100% - 36px + 1px);
		        mask-size: 100% 36px, 100% calc(100% - 36px + 1px);
	}
}

/* ── Put a safari together ────────────────────────────────────────────────── */
.splan__in {
	display: grid; grid-template-columns: .85fr 1.15fr;
	gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.splan__say .lead { margin-bottom: 1.2rem; }
.splan__say > p { color: var(--ink-70); max-width: 44ch; }
.splan__tel { font-weight: 600; }
.splan__tel a { color: var(--brand-ink); white-space: nowrap; }

/* The contact page's composer: paper, one hairline, the brand orange along
   the top. */
.splan__form {
	background: var(--paper);
	border: 1px solid var(--line);
	border-top: 2px solid var(--brand);
	padding: clamp(1.3rem, 2.6vw, 2.1rem);
}
.splan__h { font-size: var(--t-xl); margin: 0 0 1.2rem; }

.splan__trips { border: 0; margin: 0 0 1.3rem; padding: 0; min-width: 0; }
.splan__trips legend { padding: 0; margin-bottom: .6rem; font: 600 var(--t-xs)/1 var(--ui); color: var(--ink-70); }
.splan__row { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Checkboxes stay in the tab order; only their labels are drawn. */
.splan__trips input {
	position: absolute; width: 1px; height: 1px; margin: 0;
	opacity: 0; pointer-events: none;
}
.splan__trips label {
	display: inline-flex; align-items: center; gap: .5em;
	font: 600 var(--t-sm)/1 var(--ui);
	padding: .68em 1em .68em .8em;
	color: var(--ink); background: var(--sand);
	border: 1px solid var(--line-2); border-radius: 2px 2px 0 0;
	cursor: pointer;
	transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.splan__trips label svg { width: 1.2em; height: 1.2em; flex: none; color: var(--gold); }
.splan__trips label:hover { border-color: var(--ink); }
.splan__trips input:checked + label { background: var(--ink); border-color: var(--ink); color: var(--sand); }
.splan__trips input:checked + label svg { color: var(--gold-lt); }
.splan__trips input:focus-visible + label { outline: 2.5px solid var(--brand-ink); outline-offset: 2px; }

.splan__fields { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.splan__form .ask__f input,
.splan__form .ask__f select { background-color: var(--sand); }

.splan__stay {
	display: flex; align-items: center; gap: .6rem;
	margin-top: 1.1rem;
	font: 500 var(--t-sm)/1.3 var(--ui); color: var(--ink);
	cursor: pointer;
}
.splan__stay input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--brand-ink); }

/* The message as it will arrive, so nobody is surprised by what they send. */
.splan__msg {
	margin-top: 1.3rem; padding: .9rem 1rem;
	background: var(--sand); border-left: 2px solid var(--gold);
}
.splan__msg-h { margin: 0 0 .35rem; font: 600 var(--t-xs)/1 var(--ui); color: var(--ink-70); }
.splan__msg output { display: block; font-size: var(--t-sm); line-height: 1.55; }

.splan__go { width: 100%; justify-content: center; margin-top: 1.2rem; }
.splan__fine { margin: .8rem 0 0; max-width: none; text-align: center; font-size: var(--t-xs); color: var(--ink-70); }

@media (max-width: 900px) { .splan__in { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .splan__fields { grid-template-columns: 1fr; } }

/* ── When to go ───────────────────────────────────────────────────────────── */
.swhen__in {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.sseasons { margin: 0; border-top: 1px solid var(--line-2); }
.sseasons div { padding: 1rem 0 1.05rem; border-bottom: 1px solid var(--line-2); }
.sseasons dt {
	font-family: var(--disp); font-size: var(--t-md); line-height: 1.2;
	font-variation-settings: 'opsz' 28, 'SOFT' 12;
	margin-bottom: .3rem;
}
.sseasons dd { margin: 0; font-size: var(--t-sm); color: var(--ink-70); max-width: 52ch; }
.swhen__fest { margin-top: 1.4rem; font-size: var(--t-sm); color: var(--ink-70); }

/* Twelve months as a board of times: the month small, the time in the
   display face with tabular figures, so a column of them reads as a curve
   of the evenings drawing out and in. */
.ssun {
	background: var(--paper);
	border: 1px solid var(--line);
	padding: clamp(1.3rem, 2.8vw, 2.2rem);
}
.ssun h3 { font-size: var(--t-xl); margin-bottom: .35rem; }
.ssun__note { font-size: var(--t-sm); color: var(--ink-70); margin-bottom: .9rem; }
.ssun__today {
	display: inline-flex; align-items: baseline; gap: .5em;
	margin: 0 0 1.2rem; padding: .5rem .8rem;
	background: var(--sand-2);
	font-size: var(--t-sm);
}
.ssun__today b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ssun__today[hidden] { display: none; }
.ssun__months {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0; margin: 0;
	border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2);
}
.ssun__months div {
	padding: .75rem .8rem .8rem;
	border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.ssun__months dt { font-size: var(--t-xs); color: var(--ink-70); }
.ssun__months dd {
	margin: .2rem 0 0;
	font-family: var(--disp); font-size: var(--t-lg); line-height: 1;
	font-variant-numeric: tabular-nums lining-nums;
	font-variation-settings: 'opsz' 30, 'SOFT' 10;
}
/* This month, marked by safari.js: the sun's gold along the top edge. */
.ssun__months .is-now { background: var(--sand); box-shadow: inset 0 2px 0 var(--gold); }
.ssun__months .is-now dt { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) { .swhen__in { grid-template-columns: 1fr; } }
@media (max-width: 460px) {
	.ssun__months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ssun__months div { padding: .65rem .6rem .7rem; }
}