/* ==========================================================================
   Jonshan Safari: homepage
   ========================================================================== */

/* ---------- 2. hero: the painted horizon ----------
   No photograph. The supplied files top out at 1000px wide and would go soft
   the moment they ran full-bleed, so the hero is drawn instead: the same
   dunes, sun and impasto strokes as the logo's medallion, unfolded to the
   width of the page. It stays crisp at any size and costs about 3KB. */
.hero{
  position:relative;
  min-height:min(90vh,800px);
  display:flex;align-items:center;
  /* Symmetric block padding, so the copy sits on the hero's true centre line.
     The top value clears the masthead, which is absolutely positioned over the
     hero rather than taking up flow; the bottom matches it so the space above
     the headline and the space below the buttons read as equal. */
  /* Measured, not guessed: with a flat 92px the block landed 12px low, because
     Fraunces carries a lot of ascent above its cap height and the flexbox
     centres the line box rather than the letterforms. Biasing the padding
     splits that difference so the type looks centred. */
  padding-block:86px 98px;
  overflow:hidden;
  background:var(--sand-pale);
}
.hero .dunes{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero::after{                       /* the impasto grain, over everything */
  content:"";position:absolute;inset:0;
  background-image:var(--grain);
  opacity:.07;pointer-events:none;
}
.hero__in{
  position:relative;z-index:2;
  width:100%;max-width:var(--wrap);
  margin-inline:auto;padding-inline:var(--gut);
}
.hero__copy{max-width:none}
.hero .h1{max-width:12ch}
.hero .h1{color:var(--bark);max-width:12ch}
.hero__lede{
  margin-top:22px;max-width:43ch;
  font-size:clamp(18px,1.6vw,21px);line-height:1.55;
  color:var(--bark-2);
}
.hero .btns{margin-top:34px}
.hero__chip{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* The page's single piece of non-user-triggered motion: the sun lifts and the
   dunes settle, once, on load. Driven by a CSS animation rather than a class
   the script adds, so the artwork is painted whether or not the JS ever runs.
   An opacity:0 that waits on JavaScript is an invisible hero on a bad
   connection. animation-fill-mode:both holds the end state after it plays. */
@keyframes rise{from{transform:translateY(34px);opacity:0}to{transform:none;opacity:1}}
@keyframes settle{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.hero .sun{animation:rise 1.5s cubic-bezier(.16,.84,.34,1) .12s both}
.hero .dune{animation:settle 1.1s cubic-bezier(.2,.8,.3,1) both}
.hero .dune--0{animation-delay:.02s}
.hero .dune--1{animation-delay:.09s}
.hero .dune--2{animation-delay:.16s}
.hero .dune--3{animation-delay:.23s}
.hero .dune--4{animation-delay:.30s}
@media (prefers-reduced-motion:reduce){
  .hero .sun,.hero .dune{animation:none}
}

@media (max-width:760px){
  /* Same centring on a phone. The min-height is what keeps the dune field in
     view once the copy is no longer pinned to the top of the section. */
  .hero{min-height:76vh;padding-block:97px 79px}
  .hero .h1{max-width:none}
}

/* ---------- 3. trust strip ----------
   Four claims, separated by hairlines rather than boxed into cards. The rule
   between them is doing the work a border-radius would otherwise be asked to
   do, and it costs nothing. */
.trust{background:var(--paper);padding-block:clamp(26px,3.4vw,42px)}

/* Two by two on a phone, four across from 1000px. Centred at every size: with
   a mark sitting above the label, a left-aligned column would hang the icon off
   the text it belongs to. The hairlines do the separating, so the cells need no
   boxes of their own. */
.trust__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.trust__i{
  /* Top-aligned, not centred: the labels wrap to different line counts, and
     centring each stack independently left the marks sitting at four different
     heights across a row. Anchoring them to the top puts every mark on one
     line; the grid already equalises the cells themselves. */
  display:flex;flex-direction:column;justify-content:flex-start;
  text-align:center;padding:24px 14px;
}
.trust__ic{
  /* A Font Awesome glyph, so it is sized by font-size, not width/height. The
     fixed line-height reserves its box before the webfont arrives, which stops
     the four cells shifting when it lands. */
  font-size:25px;line-height:1;
  margin:0 auto 12px;color:var(--gold-dk);
}
.trust__i b{display:block;font:600 15.5px/1.3 var(--body);color:var(--ink);margin-bottom:5px}
.trust__i span{display:block;font-size:14px;line-height:1.5;color:var(--muted)}

/* 2×2: a cross of hairlines, so the four read as one strip rather than as
   four stacked blocks. */
.trust__i:nth-child(odd){border-right:1px solid var(--rule)}
.trust__i:nth-child(-n+2){border-bottom:1px solid var(--rule)}

@media (min-width:560px){
  .trust__i{padding:24px 22px}
  .trust__i b{font-size:16px}
  .trust__i span{font-size:14.5px}
}
@media (min-width:1000px){
  .trust__grid{grid-template-columns:repeat(4,1fr)}
  .trust__i{padding:6px 26px;border-right:1px solid var(--rule);border-bottom:0}
  .trust__i:last-child{border-right:0}
  .trust__ic{font-size:27px}
}

/* ---------- 4. where you sleep ----------
   The page's one dark band, and the only place it goes dark. This is the
   decision the whole site is asking a visitor to make, and the product is a
   night, so the ground turns to night exactly here.

   The two cards are the same size and deliberately not the same material: the
   open-air option is a hole cut in the night with stars behind it, the tent
   option is a panel of canvas. Each card is made of the thing it sells. */
.stay__grid{display:grid;gap:26px;margin-top:clamp(34px,4vw,52px)}
@media (min-width:860px){.stay__grid{grid-template-columns:1fr 1fr;gap:32px}}

.stay__card{
  position:relative;border-radius:5px;padding:26px 26px 30px;
  display:flex;flex-direction:column;
}
.stay__card .arch{margin:-26px -26px 24px}
/* One aspect for both, or the taller source photo pushes its card's heading
   out of line with the other's and the pair stops reading as a fair choice. */
.stay__card .arch__frame{border-radius:5px 5px 0 0;aspect-ratio:16/11}

/* open air: the night itself, with a field of stars behind the glass */
.stay--open{
  background:linear-gradient(180deg,#2C1A0A 0%,#1E1207 100%);
  border:1px solid rgba(246,236,214,.14);
  overflow:hidden;
}
.stay--open::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%,#FBEFD6 50%,transparent 51%),
    radial-gradient(1px 1px at 62% 14%,#F3E2C0 50%,transparent 51%),
    radial-gradient(1.6px 1.6px at 84% 34%,#FFF8E8 50%,transparent 51%),
    radial-gradient(1px 1px at 34% 46%,#EBD9B4 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 74% 58%,#FBEFD6 50%,transparent 51%),
    radial-gradient(1px 1px at 12% 68%,#E4D0A8 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 48% 80%,#FFF8E8 50%,transparent 51%),
    radial-gradient(1px 1px at 90% 76%,#EBD9B4 50%,transparent 51%);
}
.stay--open > *{position:relative;z-index:1}

/* tent: a panel of canvas, warm and opaque */
.stay--tent{background:var(--cream);color:var(--ink);border:1px solid #E3D0AC}
.stay--tent .stay__h,.stay--tent .stay__price b{color:var(--bark)}
.stay--tent .stay__sub,.stay--tent .stay__list li{color:var(--muted)}
.stay--tent .stay__list svg{color:var(--gold-dk)}
.stay--tent .stay__price{border-top-color:#E3D0AC}

.stay__h{font-family:var(--display);font-weight:400;font-size:clamp(25px,2.6vw,31px);
  letter-spacing:-.02em;color:var(--cream);font-variation-settings:'opsz' 48,'SOFT' 26,'WONK' 0}
.stay__sub{margin-top:12px;font-size:16px;line-height:1.6;color:var(--muted-lt)}

.stay__list{margin-top:20px;display:grid;gap:10px}
.stay__list li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:var(--muted-lt)}
.stay__list svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--ochre)}

.stay__price{
  margin-top:auto;padding-top:22px;
  border-top:1px solid rgba(246,236,214,.16);
  display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;justify-content:space-between;
}
.stay__price b{
  font-family:var(--display);font-weight:400;font-size:30px;color:var(--cream);
  font-variation-settings:'opsz' 40,'SOFT' 24,'WONK' 0;letter-spacing:-.02em;
}
.stay__price i{font-style:normal;font-size:14px;color:var(--muted-lt)}
.stay--tent .stay__price i{color:var(--muted)}
/* The prices are floors, not quotes, so every one of them is worded "from",
   but in the body face at reading size, so the figure stays the thing you see. */
.stay__from{
  font:500 14px/1 var(--body);color:var(--muted-lt);letter-spacing:0;
  font-variation-settings:normal;
}
.stay--tent .stay__from{color:var(--muted)}
.stay__card .btn{margin-top:22px}

/* ---------- 5. how the night goes ----------
   Times down the left on a gold spine. Numbered markers are used here and
   nowhere else on the page, because this is the one part of the content that
   genuinely is a sequence. */
.night__list{
  margin-top:clamp(30px,3.6vw,46px);
  border-left:1.5px solid var(--rule);
  padding-left:0;
}
.night__i{position:relative;padding:0 0 30px 30px}
.night__i:last-child{padding-bottom:0}
.night__i::before{
  content:"";position:absolute;left:-6.5px;top:9px;
  width:11px;height:11px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px var(--sand);
}
.night__t{
  font-family:var(--display);font-weight:400;font-size:19px;color:var(--gold-dk);
  font-variation-settings:'opsz' 24,'SOFT' 20,'WONK' 0;letter-spacing:.01em;
}
.night__i h3{margin-top:3px;font-size:20px;font-variation-settings:'opsz' 32,'SOFT' 28,'WONK' 0}
.night__i p{margin-top:7px;font-size:16px;line-height:1.6;color:var(--muted);max-width:56ch}
@media (min-width:820px){
  .night__wrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(40px,5vw,72px);align-items:start}
  .night__aside .arch{position:sticky;top:34px}
}

/* ---------- 6. what's included ---------- */
.inc{background:var(--paper)}
.inc__cols{display:grid;gap:clamp(32px,4vw,56px);margin-top:clamp(30px,3.6vw,46px)}
@media (min-width:800px){.inc__cols{grid-template-columns:1.35fr 1fr}}
.inc h3{font-size:20px;margin-bottom:16px;font-variation-settings:'opsz' 32,'SOFT' 28,'WONK' 0}
.inc ul{display:grid;gap:12px}
.inc li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.55}
.inc svg{width:18px;height:18px;flex:none;margin-top:3px}
.inc__yes svg{color:var(--gold-dk)}
.inc__no li{color:var(--muted)}
.inc__no svg{color:var(--rose);opacity:.75}
.inc__note{margin-top:22px;font-size:14.5px;line-height:1.6;color:var(--muted);max-width:46ch}

/* ---------- 7 & 9. arch galleries ---------- */
.tiles{display:grid;gap:24px;margin-top:clamp(30px,3.6vw,46px)}
@media (min-width:620px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.tiles{grid-template-columns:repeat(4,1fr);gap:26px}}
.tiles .arch__frame{aspect-ratio:3/4}
.tiles h3{font-size:19px;margin-top:16px;font-variation-settings:'opsz' 30,'SOFT' 28,'WONK' 0}
.tiles p{margin-top:7px;font-size:15px;line-height:1.55;color:var(--muted)}

.gallery{background:var(--sand)}
.gal{display:grid;gap:20px;margin-top:clamp(30px,3.6vw,44px);grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.gal{grid-template-columns:repeat(3,1fr);gap:24px}}
@media (min-width:1040px){.gal{grid-template-columns:repeat(4,1fr)}}
.gal .arch__frame{aspect-ratio:4/5}

/* ---------- 8. where we are ---------- */
.where{background:var(--paper)}
.where__wrap{display:grid;gap:clamp(34px,4vw,62px);align-items:start}
@media (min-width:900px){.where__wrap{grid-template-columns:1fr 1fr}}
.where__facts{margin-top:26px;display:grid;gap:0}
.where__facts div{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:16px}
.where__facts dt{flex:none;width:130px;color:var(--muted)}
.where__facts dd{margin:0;font-weight:500}
.where__pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.where__pair .arch__frame{aspect-ratio:3/4}
.where__map{
  margin-top:24px;border:1px solid var(--rule);border-radius:4px;overflow:hidden;
  background:var(--sand);
}
.where__map iframe{display:block;width:100%;height:340px;border:0}
@media (min-width:900px){.where__map{margin-top:26px}}

/* ---------- 10. reviews ---------- */
.rev{background:var(--sand)}
.rev__box{
  margin-top:30px;background:var(--paper);border:1px solid var(--rule);border-radius:5px;
  padding:clamp(28px,3.4vw,40px);display:flex;flex-wrap:wrap;gap:26px;
  align-items:center;justify-content:space-between;
}
.rev__score{font-family:var(--display);font-weight:400;font-size:64px;line-height:1;
  color:var(--bark);font-variation-settings:'opsz' 72,'SOFT' 20,'WONK' 0;letter-spacing:-.03em}
.rev__stars{color:var(--sun);font-size:20px;letter-spacing:3px;margin-top:8px;display:block}

/* ---------- 11. FAQ ---------- */
.faq__list{margin-top:clamp(28px,3.4vw,42px);border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 42px 22px 0;position:relative;
  font:500 18px/1.45 var(--body);color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
  margin-top:-7px;border-right:2px solid var(--gold-dk);border-bottom:2px solid var(--gold-dk);
  transform:rotate(45deg);transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--gold-dk)}
.faq__a{padding:0 48px 24px 0;font-size:16.5px;line-height:1.65;color:var(--muted);max-width:70ch}
.faq__a p + p{margin-top:12px}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* ---------- .facts: a list of statements ----------
   Term and description on hairlines. Three claims in three identical bordered
   cards is the default treatment and says nothing about what the claims are; a
   definition list at least admits it is a list of statements.

   Lives here rather than in about.css because two pages want it now (/about/
   for how the camp is run, /packages/ for how the price works), and home.css is
   the sheet that loads everywhere. */
.facts{margin-top:clamp(26px,3.2vw,40px);border-top:1px solid var(--rule)}
.facts > div{
  display:grid;gap:8px;
  padding:22px 0;border-bottom:1px solid var(--rule);
}
.facts dt{
  font-family:var(--display);font-weight:400;font-size:21px;
  letter-spacing:-.014em;color:var(--bark);
  font-variation-settings:'opsz' 32,'SOFT' 28,'WONK' 0;
}
.facts dd{margin:0;font-size:16.5px;line-height:1.62;color:var(--muted);max-width:58ch}
@media (min-width:720px){
  .facts > div{grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:34px;align-items:baseline}
}

/* ---------- 12. booking band ---------- */
.book{background:var(--sand-2);text-align:center}
.book::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.07;pointer-events:none}
.book .h2{margin-inline:auto}
.book .lede{margin-inline:auto;color:var(--bark-2)}
.book .btns{justify-content:center;margin-top:32px}
.where__note{margin-top:24px;font-size:16px;line-height:1.62;color:var(--muted);max-width:48ch}