/* ==========================================================================
   DugDug Camps — one stylesheet for the whole site.
   Edit here, not in the HTML. Every page loads this file.

   Contents
   01  Tokens
   02  Reset & base
   03  Typography
   04  Layout
   05  Buttons
   06  Navigation
   07  Home hero
   08  Page hero (sub-pages)
   09  Booking bar & quote
   10  Editorial blocks
   11  Tent cards
   12  Feature / FAQ list
   13  Whole camp & polaroid
   14  Route table
   15  Reviews
   16  Partner cards
   17  Closing CTA
   18  Footer
   19  Sticky mobile CTA
   20  Motion & focus
   24  October 2026: brand font, colours, illustrations, calendar
   ========================================================================== */


/* 01  TOKENS ============================================================== */

:root{
  /* Sunset ramp — the brand. Order matters: these read top-to-bottom as a sky. */
  --sky:#A9D2E6;
  --butter:#F8EFC0;
  --peach:#F7CDA4;
  --coral:#EC9F76;
  --clay:#C97A4E;       /* decorative only — 2.9:1 on cream, never for text */
  --clay-text:#9C5426;  /* the readable clay: 5.0:1 on paper, 5.4:1 on card  */
  --oxblood:#41190F;
  --oxblood-2:#5E2717;

  /* Brand playbook names (Sept 2026). The playbook's four colours map onto
     the tokens above, so there is one palette, not two:
       Ridge Brown  = --oxblood   wordmark, text, signage
       Canvas       = --paper     pages, cards, printed menus
       Chai         = --clay-text the italic word, fire moments
       Pine         = --pine      the rider world, the forest; new       */
  --ridge-brown:var(--oxblood);
  --canvas:var(--paper);
  --chai:var(--clay-text);
  --pine:#1F3A2C;
  --pine-2:#2B4B3A;

  /* Placeholder-only stops, used by the .ph-* gradients while photos are
     missing. Named so nothing outside :root carries a raw hex. */
  --sky-deep:#7FB4CE;
  --sky-mist:#8FBBD0;
  --sand:#E8C489;
  --rust:#8E4A2C;
  --ember:#2C130C;
  --white:#FFFFFF;

  /* Surfaces */
  --paper:#F7F1E5;
  --card:#FDFAF3;

  /* Text — three weights of brown, not seven.
     Every value below passes WCAG AA on the surface it is paired with. */
  --ink:#2A1610;        /* headings + primary body on paper/card      */
  --ink-2:#523528;      /* secondary body on paper/card       9.8:1   */
  --ink-tint:#43261A;   /* body on sky / butter / peach       8.5:1   */
  --muted:#7A5F51;      /* small meta text on card            5.6:1   */
  --paper-2:rgba(247,241,229,.86);  /* body text on oxblood          */

  --line:rgba(65,25,15,.14);
  --line-strong:rgba(65,25,15,.22);
  --line-light:rgba(247,241,229,.18);

  /* Spacing — a 1.5-ish ratio. Use these, don't invent new numbers. */
  --s1:8px; --s2:14px; --s3:22px; --s4:34px; --s5:52px; --s6:80px;

  --max:1300px;
  --nav-h:64px;

  /* Type — two label sizes, not seven. 11px is the floor for uppercase. */
  --label:11px;         /* interactive: buttons, nav          */
  --meta:11.5px;        /* non-interactive: rates, captions   */
  --track-wide:.24em;   /* eyebrows                           */
  --track:.14em;        /* buttons, meta                      */

  /* Motion — one curve, five durations. Pick the nearest; don't invent. */
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur-press:110ms;    /* :active squash                     */
  --dur-fast:.2s;       /* colour, opacity, border            */
  --dur:.3s;            /* small movement: arrows, galleries  */
  --dur-slow:.42s;      /* panels: nav, mobile menu           */
  --dur-reveal:.8s;     /* the one scroll reveal per section  */
}


/* 02  RESET & BASE ======================================================== */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}

/* Anchor targets clear the fixed nav instead of hiding under it. */
[id]{scroll-margin-top:calc(var(--nav-h) + var(--s3))}

.skip{
  position:absolute;left:var(--s2);top:-100px;z-index:300;
  background:var(--butter);color:var(--oxblood);
  padding:var(--s2) var(--s3);font-size:var(--label);font-weight:600;
  letter-spacing:var(--track);text-transform:uppercase;text-decoration:none;
  transition:top var(--dur-fast);
}
.skip:focus{top:var(--s2)}

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


/* 03  TYPOGRAPHY ========================================================== */

h1,h2,h3,h4,h5{
  font-family:'Fraunces',Georgia,serif;
  font-weight:300;
  letter-spacing:-.025em;
  line-height:1.05;
}
i{font-style:italic}

.hand{font-family:'Caveat',cursive;font-weight:500}

/* Eyebrow — the brand's small-caps label. Used once per section, not per block. */
.eyebrow{
  font-size:var(--label);
  letter-spacing:var(--track-wide);
  text-transform:uppercase;
  font-weight:600;
  color:var(--clay-text);
}
/* Clay of any shade tops out around 4:1 on peach, so tinted sections
   take oxblood eyebrows instead of a slightly-darker clay. */
.on-tint .eyebrow{color:var(--oxblood)}
.on-dark .eyebrow{color:var(--peach)}

/* Section heading pair: eyebrow + h2 + optional lede. */
.lead{max-width:60ch}
.lead h2{font-size:clamp(2rem,4.4vw,3.2rem);margin-top:var(--s2)}
.lead p{font-weight:400;margin-top:var(--s2);max-width:52ch;color:var(--ink-2)}
.on-tint .lead p{color:var(--ink-tint)}
.on-dark .lead p{color:var(--paper-2)}

/* Head row: heading on the left, a link on the right. */
.head-row{
  display:flex;justify-content:space-between;align-items:flex-end;
  flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s5);
}

.ownernote p{font-weight:400;color:var(--ink-2);max-width:56ch}
.ownernote p + p{margin-top:var(--s2)}
.ownernote .sig{display:block}

.sig{
  font-family:'Caveat',cursive;font-size:1.8rem;color:var(--clay-text);
  margin-top:var(--s4);transform:rotate(-1.4deg);
}


/* 04  LAYOUT ============================================================== */

.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.wrap--narrow{max-width:1000px}
.wrap--tight{max-width:820px}

.section{padding:clamp(72px,10vw,124px) 0}
.section--short{padding:clamp(52px,7vw,84px) 0}

.bg-sky{background:var(--sky)}
.bg-butter{background:var(--butter)}
.bg-peach{background:var(--peach)}
.bg-paper{background:var(--paper)}
.bg-card{background:var(--card)}
.bg-dark{background:var(--oxblood);color:var(--paper)}
.bg-pine{background:var(--pine);color:var(--paper)}

/* Pair a background class with a text-context class so descendants
   pick the right ink without inline styles. */
.on-tint{color:var(--oxblood)}
.on-dark{color:var(--paper)}

/* The sunset seam — 6px of the whole sky, used as a divider. */
.seam{
  height:6px;
  background:linear-gradient(90deg,
    var(--sky) 0 20%, var(--butter) 20% 40%, var(--peach) 40% 60%,
    var(--coral) 60% 80%, var(--oxblood) 80% 100%);
}

.grain{
  position:absolute;inset:0;opacity:.055;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* 05  BUTTONS ============================================================= */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
  min-height:44px;                 /* touch target floor */
  padding:13px 26px;
  background:var(--coral);color:var(--oxblood);
  font-size:var(--label);font-weight:600;letter-spacing:var(--track);
  text-transform:uppercase;text-decoration:none;
  border:none;cursor:pointer;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:active{transform:scale(.97);transition-duration:var(--dur-press)}
@media(hover:hover) and (pointer:fine){
  .btn:hover{background:var(--butter);transform:translateY(-2px)}
}

.btn-line{background:transparent;border:1.5px solid rgba(247,241,229,.6);color:var(--paper)}
.btn-line:hover{background:var(--paper);color:var(--oxblood);border-color:var(--paper)}

.btn-dark{background:var(--oxblood);color:var(--paper)}
.btn-dark:hover{background:var(--oxblood-2);color:var(--butter)}

.btn-sky{background:var(--sky);color:var(--oxblood)}
.btn-sky:hover{background:var(--butter)}

/* Inline text link with an arrow that steps forward on hover.
   The arrow is functional here — it animates. It is not on .btn. */
.more{
  display:inline-flex;align-items:center;gap:9px;
  padding:var(--s1) 0;
  font-size:var(--label);letter-spacing:var(--track);
  text-transform:uppercase;font-weight:600;text-decoration:none;
  color:var(--clay-text);
  transition:gap var(--dur) var(--ease);
}
@media(hover:hover) and (pointer:fine){.more:hover{gap:15px}}
.on-tint .more{color:var(--oxblood)}
.on-dark .more{color:var(--peach)}


/* 06  NAVIGATION ========================================================== */

nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s2) clamp(20px,4vw,44px);
  background:rgba(65,25,15,.96);
  backdrop-filter:blur(14px);
  transition:background var(--dur-slow) var(--ease), padding var(--dur-slow) var(--ease);
}

/* The nav is solid on every page and at every scroll position.
   The old transparent-over-hero nav sat at 1.4:1 on the pale sky band on
   the home page, and worse on the butter/sky/peach sub-page heroes. A
   scrim fixed the ratio but greyed out the top of the sunset; a solid bar
   fixes it outright and frames the gradient like a window instead. */
nav.solid{box-shadow:0 1px 0 var(--line-light)}   /* no size change: --nav-h stays true */

.brand{
  display:flex;align-items:center;gap:11px;
  color:var(--paper);text-decoration:none;position:relative;z-index:1;
}
.brand .mark{font-family:'Fraunces',serif;font-weight:400;font-size:23px}
.brand .dev{font-size:14px;opacity:.7}

.navlinks{display:flex;gap:30px;align-items:center;position:relative;z-index:1}
.navlinks a:not(.btn){
  color:var(--paper);text-decoration:none;
  font-size:var(--label);letter-spacing:var(--track);
  text-transform:uppercase;font-weight:500;
  opacity:.92;transition:opacity var(--dur);position:relative;
}
.navlinks a:not(.btn){padding:11px 0}
.navlinks a:not(.btn)::after{
  content:"";position:absolute;left:0;right:100%;bottom:4px;height:1.5px;
  background:var(--peach);transition:right var(--dur) var(--ease);
}
.navlinks a:not(.btn):hover,
.navlinks a[aria-current="page"]{opacity:1}
.navlinks a:not(.btn):hover::after,
.navlinks a[aria-current="page"]::after{right:0}

/* Mobile menu — replaces links that used to be display:none with nothing. */
.menu-btn{
  display:none;position:relative;z-index:1;
  width:44px;height:44px;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;color:var(--paper);
}
.menu-btn span{
  display:block;width:22px;height:1.5px;background:currentColor;position:relative;
  transition:background var(--dur-fast);
}
.menu-btn span::before,.menu-btn span::after{
  content:"";position:absolute;left:0;width:22px;height:1.5px;background:currentColor;
  transition:transform var(--dur) var(--ease), top var(--dur-fast);
}
.menu-btn span::before{top:-7px}
.menu-btn span::after{top:7px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:110;
  background:var(--oxblood);
  display:flex;flex-direction:column;
  /* starts below the nav rather than vertically centred — centring left a
     large void under the logo on anything taller than a phone */
  padding:calc(var(--nav-h) + var(--s4)) clamp(20px,6vw,44px)
          calc(var(--s4) + env(safe-area-inset-bottom));
  transform:translateY(-100%);
  transition:transform var(--dur-slow) var(--ease);
  overflow-y:auto;
}
.menu > *{width:100%;max-width:560px}
.menu[data-open="true"]{transform:none}
.menu[data-open="false"]{visibility:hidden;transition:transform var(--dur-slow) var(--ease),visibility 0s var(--dur-slow)}
.menu a:not(.btn){
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(1.6rem,6vw,2.1rem);line-height:1.15;
  color:var(--paper);text-decoration:none;letter-spacing:-.025em;
  padding:15px 0;border-bottom:1px solid var(--line-light);
  display:block;
}
.menu a[aria-current="page"]{color:var(--peach)}
.menu .menu-cta{
  margin-top:var(--s3);font-family:'Archivo',sans-serif;
  font-size:var(--label);border:none;
}
/* follows the CTA directly. Pushing it to the bottom of the viewport left
   a void in the middle on anything taller than a small phone. */
.menu .menu-meta{
  margin-top:var(--s4);
  color:var(--paper-2);font-size:14px;line-height:1.7;
}
.menu .menu-meta a{
  font-family:'Archivo',sans-serif;font-size:14px;border:none;
  display:inline-block;padding:7px 0;
  text-decoration:underline;text-underline-offset:3px;
}
.menu-addr{display:inline-block;margin-top:var(--s1)}

@media(max-width:900px){
  .navlinks{display:none}
  .menu-btn{display:flex}
}
@media(min-width:901px){
  .menu{display:none}
}

body[data-menu="open"]{overflow:hidden}


/* 07  HOME HERO =========================================================== */
/* Two stacked parts: a flexible sky, and a solid oxblood block sized to the
   content, with the ridge silhouette sitting on the seam between them.
   The earlier version put the copy on a full-bleed gradient, so whether the
   eyebrow landed on oxblood or on peach depended on viewport height — it
   measured 10.4:1 at 1440x900 and 1.3:1 at 1280x720. This construction
   can't drift: the text is always on solid oxblood. Same idea as .close. */

.hero{
  min-height:100svh;
  display:flex;flex-direction:column;
  padding-top:var(--nav-h);
}

.hero-sky{
  position:relative;flex:1 1 auto;min-height:170px;overflow:hidden;
  background:linear-gradient(180deg,
    var(--sky) 0 18%, var(--butter) 18% 38%, var(--peach) 38% 56%, var(--coral) 56% 100%);
}
/* PHOTO SLOT — js/site.js fills .hero-photo from data-img (see img/README.md). The gradient behind it
   stays visible while the photo loads and if it ever fails. */
.hero-photo{position:absolute;inset:0;background-size:cover;background-position:center}
.hero-ridge{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(58px,13vh,132px);z-index:2}

/* With a real photo the sky strip is the most important thing on the page,
   so it never shrinks to a sliver. Phones: at least a third of the screen. */
.hero-sky{min-height:max(170px,34svh)}

/* Wide screens: photo on the right at full height, copy on solid oxblood on
   the left. The photo's left edge is cut as a ridge line, the same shape as
   the silhouette it replaces. Text contrast is still fixed, never on photo. */
@media(min-width:1000px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);background:var(--oxblood)}
  .hero-sky{grid-column:2;grid-row:1;min-height:0;
    clip-path:polygon(9% 0,100% 0,100% 100%,0 100%,5% 86%,1.5% 72%,7% 57%,2.5% 43%,8% 27%,3.5% 12%)}
  .hero-ridge{display:none}
  .hero-body{grid-column:1;grid-row:1;display:flex;align-items:center;background:none}
  .hero-body .wrap{margin:0 0 0 auto;max-width:calc(var(--max) * .47);width:100%}
}

.hero-body{
  background:var(--oxblood);position:relative;
  padding:clamp(28px,5vh,56px) 0 clamp(40px,7vh,80px);
}

.hero-eyebrow{
  color:var(--peach);letter-spacing:var(--track-wide);font-size:var(--label);
  font-weight:600;text-transform:uppercase;margin-bottom:var(--s3);
  display:flex;align-items:center;gap:var(--s2);
}
.hero-eyebrow::before{content:"";width:34px;height:1.5px;background:var(--peach)}

.hero h1{
  font-size:clamp(2.5rem,5.6vw,4.9rem);line-height:1;
  color:var(--paper);letter-spacing:-.03em;max-width:15ch;
}
.hero h1 i{color:var(--peach)}
.hero-sub{
  color:var(--paper);opacity:.92;font-size:clamp(1rem,1.6vw,1.18rem);
  max-width:42ch;margin-top:var(--s3);font-weight:400;
}
.hero-cta{display:flex;gap:var(--s2);margin-top:var(--s4);flex-wrap:wrap}
.hero-trust{
  margin-top:var(--s3);font-size:var(--meta);letter-spacing:.1em;
  text-transform:uppercase;color:var(--paper);opacity:.85;font-weight:500;
  display:flex;gap:18px;flex-wrap:wrap;
}
.hero-trust b{color:var(--peach);font-weight:600}


/* 08  PAGE HERO (sub-pages) =============================================== */

.phero{position:relative;padding:calc(var(--nav-h) + var(--s6)) 0 var(--s6);overflow:hidden}
.phero .wrap{position:relative;z-index:2}
.phero h1{font-size:clamp(2.6rem,6.4vw,5rem);max-width:16ch;color:var(--oxblood)}
.phero h1 i{color:var(--clay-text)}
.phero p{max-width:46ch;margin-top:var(--s3);font-weight:400;font-size:1.1rem;color:var(--ink-tint)}
.phero .eyebrow{margin-bottom:var(--s2)}


/* 09  BOOKING BAR & QUOTE ================================================= */

.bookbar{background:var(--oxblood);color:var(--paper);position:relative;z-index:10}
.bookbar .wrap{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr auto;align-items:stretch}

.bf{
  padding:18px 22px;
  border-right:1px solid var(--line-light);
  display:flex;flex-direction:column;gap:6px;justify-content:center;
}
.bf:first-child{padding-left:0}
.bf label{
  font-size:var(--label);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--peach);font-weight:600;
}
.bf select,.bf input{
  font-family:'Fraunces',serif;font-size:1.14rem;
  color:var(--paper);background:transparent;
  border:none;border-bottom:1px solid rgba(247,241,229,.32);  /* it's a field, show it */
  width:100%;cursor:pointer;padding:3px 0;
  transition:border-color var(--dur-fast);
}
.bf select:hover,.bf input:hover{border-bottom-color:var(--peach)}
.bf [aria-invalid="true"]{border-bottom:2px solid var(--butter)}
.bf option{color:var(--ink)}
.bf input[type=date]{color-scheme:dark}
.bf input:focus-visible,.bf select:focus-visible{outline:2px solid var(--peach);outline-offset:4px}

.bbtn{
  display:flex;align-items:center;justify-content:center;
  background:var(--coral);color:var(--oxblood);
  padding:0 32px;min-height:56px;
  font-size:var(--label);font-weight:600;letter-spacing:var(--track);
  text-transform:uppercase;text-decoration:none;
  transition:background var(--dur) var(--ease);
}
.bbtn:active{transform:scale(.985)}
@media(hover:hover) and (pointer:fine){.bbtn:hover{background:var(--butter)}}

.bf-note{
  grid-column:1/-1;padding:10px 0 14px;
  font-size:var(--meta);color:var(--paper-2);
  border-top:1px solid var(--line-light);
}

@media(max-width:900px){
  .bookbar .wrap{grid-template-columns:1fr 1fr}
  .bf{border-right:none;border-bottom:1px solid var(--line-light);padding:14px 0}
  .bf:nth-child(odd){padding-right:var(--s2)}
  .bf:nth-child(even){padding-left:var(--s2)}
  .bf-guests{grid-column:1/-1;padding-left:0;padding-right:0}
  .bbtn{grid-column:1/-1;padding:18px;margin-top:var(--s2)}
}

/* ── Date range picker ───────────────────────────────────────────────── */

.bf-label{
  font-size:var(--label);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--peach);font-weight:600;
}
.dp-trigger{
  font-family:'Fraunces',serif;font-size:1.14rem;
  color:var(--paper);background:transparent;
  border:none;border-bottom:1px solid rgba(247,241,229,.32);
  width:100%;text-align:left;padding:3px 0;cursor:pointer;
  opacity:.6;transition:border-color var(--dur-fast), opacity var(--dur-fast);
}
.dp-trigger.has-value{opacity:1}
.dp-trigger.is-picking{border-bottom-color:var(--peach);border-bottom-width:2px;opacity:1}
@media(hover:hover) and (pointer:fine){.dp-trigger:hover{border-bottom-color:var(--peach);opacity:1}}

.dp{
  position:absolute;top:calc(100% - 6px);left:0;z-index:40;
  background:var(--card);color:var(--ink);
  border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(65,25,15,.34);
  padding:var(--s3);
}
.dp-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  margin-bottom:var(--s3);
}
.dp-hint{
  font-size:var(--label);letter-spacing:var(--track);text-transform:uppercase;
  font-weight:600;color:var(--clay-text);margin:0;text-align:center;flex:1;
}
.dp-nav{
  width:38px;height:38px;flex:none;border:1px solid var(--line);
  background:none;cursor:pointer;color:var(--ink);font-size:17px;line-height:1;
  transition:background var(--dur-fast), transform var(--dur-press) ease-out;
}
.dp-nav:active{transform:scale(.92)}
.dp-nav[disabled]{opacity:.3;cursor:not-allowed}
@media(hover:hover) and (pointer:fine){
  .dp-nav:not([disabled]):hover{background:var(--butter)}
}

.dp-months{display:flex;gap:var(--s4)}
.dp-month{min-width:236px}
.dp-mname{
  font-family:'Fraunces',serif;font-size:1.05rem;font-weight:400;
  text-align:center;margin:0 0 var(--s2);
}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-dow{
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);text-align:center;padding-bottom:6px;font-weight:600;
}
.dp-pad{display:block}
.dp-day{
  aspect-ratio:1;min-height:32px;border:none;background:none;cursor:pointer;
  font-family:'Archivo',sans-serif;font-size:13.5px;color:var(--ink);
  position:relative;transition:background var(--dur-fast), color var(--dur-fast);
}
.dp-day[disabled]{color:var(--muted);opacity:.35;cursor:not-allowed}
@media(hover:hover) and (pointer:fine){
  .dp-day:not([disabled]):hover{background:var(--butter)}
}
.dp-day.in-range{background:var(--butter)}
.dp-day.is-start,.dp-day.is-end{background:var(--oxblood);color:var(--paper);font-weight:600}
.dp-day.is-peak::after{
  content:"";position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--clay-text);
}
.dp-day.is-start.is-peak::after,.dp-day.is-end.is-peak::after{background:var(--peach)}

.dp-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--line);
}
.dp-key{
  display:flex;align-items:center;gap:8px;
  font-size:var(--meta);color:var(--muted);
}
.dp-key-peak{width:5px;height:5px;border-radius:50%;background:var(--clay-text);flex:none}
.dp-clear{
  background:none;border:none;cursor:pointer;padding:9px 0;
  font-size:var(--label);letter-spacing:var(--track);text-transform:uppercase;
  font-weight:600;color:var(--clay-text);font-family:inherit;
}
@media(max-width:760px){
  /* clear the sticky book bar so the legend and Clear aren't underneath it */
  .dp{left:0;right:0;padding:var(--s3) var(--s2) calc(var(--s3) + 60px)}
  .dp-months{justify-content:center}
  .dp-month{min-width:0;width:100%;max-width:330px}
  .dp-day{min-height:40px}
}

/* Quote strip — appears under the bar once dates are chosen. */
.quote{background:var(--oxblood-2);color:var(--paper);display:none}
.quote.on{display:block}
.quote .wrap{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 26px;
  padding-top:15px;padding-bottom:15px;
}
.q-l{
  font-size:var(--label);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--peach);font-weight:600;
}
.q-v{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:300}
.q-strike{text-decoration:line-through;opacity:.6;font-size:1.05rem}
.q-save{background:var(--butter);color:var(--oxblood);font-size:12.5px;padding:6px 12px;font-weight:600}
.q-note{font-size:var(--meta);color:var(--paper-2);width:100%;margin:0}
.q-head{
  width:100%;font-size:var(--label);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--peach);font-weight:600;margin:0;
}

.opts{list-style:none;width:100%;display:grid;gap:var(--s1);margin:var(--s2) 0}
.opt{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);flex-wrap:wrap;
  padding:15px 18px;min-height:56px;
  background:rgba(247,241,229,.07);
  border:1.5px solid rgba(247,241,229,.22);
  color:var(--paper);font-family:inherit;text-align:left;cursor:pointer;
  transition:background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-press) ease-out;
}
.opt:active{transform:scale(.995)}
@media(hover:hover) and (pointer:fine){
  .opt:hover{background:rgba(247,241,229,.13);border-color:var(--peach)}
}
.opt[aria-checked="true"]{background:rgba(247,205,164,.16);border-color:var(--peach)}
.opt-name{
  font-family:'Fraunces',serif;font-size:1.22rem;font-weight:300;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.opt-tag{
  font-family:'Archivo',sans-serif;font-size:10.5px;letter-spacing:var(--track);
  text-transform:uppercase;font-weight:600;
  border:1px solid rgba(247,241,229,.4);padding:3px 8px;color:var(--paper-2);
}
.opt-tag--best{background:var(--butter);color:var(--oxblood);border-color:var(--butter)}
.opt-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.opt-was{text-decoration:line-through;opacity:.55;font-size:.95rem}
.opt-now{font-family:'Fraunces',serif;font-size:1.4rem}
.opt-save{
  font-size:10.5px;letter-spacing:var(--track);text-transform:uppercase;
  font-weight:600;background:var(--butter);color:var(--oxblood);padding:4px 9px;
}
@media(max-width:620px){
  .opt{flex-direction:column;align-items:flex-start;gap:var(--s1)}
}
.opt[disabled]{opacity:.55;cursor:not-allowed}
.opt[disabled]:hover{background:rgba(247,241,229,.07);border-color:rgba(247,241,229,.22)}
.opt[disabled] .opt-was{text-decoration:none}

/* Breakfast add-on */
.addon{
  width:100%;display:flex;align-items:center;gap:var(--s2);
  padding:14px 18px;min-height:52px;cursor:pointer;
  border:1.5px dashed rgba(247,241,229,.3);
  transition:border-color var(--dur-fast), background var(--dur-fast);
}
.addon:hover{border-color:var(--peach);background:rgba(247,241,229,.05)}
.addon input{
  width:20px;height:20px;flex:none;accent-color:var(--coral);cursor:pointer;margin:0;
}
.addon-text{flex:1;font-size:.95rem;color:var(--paper)}
.addon-price{
  font-size:var(--meta);letter-spacing:var(--track);text-transform:uppercase;
  font-weight:600;color:var(--peach);white-space:nowrap;
}
.addon.on,.addon:has(input:checked){border-style:solid;border-color:var(--peach)}

.q-total{
  width:100%;display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s3);padding-top:var(--s2);margin:0;
  border-top:1px solid var(--line-light);
}
.q-total span{
  font-size:var(--label);letter-spacing:var(--track);text-transform:uppercase;
  font-weight:600;color:var(--peach);
}
.q-total b{font-family:'Fraunces',serif;font-size:1.55rem;font-weight:400;color:var(--paper)}
.q-err{color:var(--butter);font-size:14px;font-weight:500}


/* 10  EDITORIAL BLOCKS ==================================================== */

.ed{display:grid;grid-template-columns:1fr 1fr;min-height:78vh}
.ed.flip .ed-media{order:2}
.ed-media{position:relative;overflow:hidden;background-size:cover;background-position:center}
.ed-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 62%,rgba(42,22,16,.35));
}
.ed-media .tag{
  position:absolute;left:22px;bottom:20px;z-index:2;
  font-family:'Caveat',cursive;font-size:1.4rem;line-height:1;
  color:var(--paper);
  background:rgba(65,25,15,.82);
  padding:7px 14px 9px;
}
.ed-body{display:flex;flex-direction:column;justify-content:center;padding:clamp(38px,6vw,84px)}
.ed-label{
  font-size:var(--label);letter-spacing:var(--track-wide);text-transform:uppercase;
  font-weight:600;margin-bottom:var(--s3);color:var(--clay-text);
}
.ed-body h3{font-size:clamp(1.85rem,3.5vw,2.9rem);margin-bottom:var(--s3)}
.ed-body p{font-weight:400;font-size:1.05rem;max-width:46ch}
.ed-body p + p{margin-top:var(--s2)}
.ed-body .more{margin-top:var(--s3)}

.ed-body.on-dark .ed-label{color:var(--peach)}
.ed-body.on-dark p{color:var(--paper-2)}
.ed-body.on-tint p{color:var(--ink-tint)}
.ed-body.on-tint .ed-label{color:var(--oxblood)}

/* Gradient placeholders — swap background for a photo when you have one. */
.ph-ridge{background-image:linear-gradient(155deg,var(--sky-mist),var(--sand) 58%,var(--oxblood))}
.ph-tent {background-image:linear-gradient(155deg,var(--butter),var(--coral) 58%,var(--rust))}
.ph-fire {background-image:linear-gradient(155deg,var(--sky-deep),var(--clay) 58%,var(--ember))}
.ph-swiss,.ph-a{background-image:linear-gradient(155deg,var(--sky),var(--butter) 55%,var(--coral))}
.ph-bell,.ph-b{background-image:linear-gradient(155deg,var(--butter),var(--coral) 58%,var(--rust))}
.ph-whole,.ph-c{background-image:linear-gradient(155deg,var(--sky-deep),var(--clay) 60%,var(--oxblood))}
.ph-d{background-image:linear-gradient(150deg,var(--sky),var(--butter) 38%,var(--coral) 70%,var(--oxblood))}

@media(max-width:880px){
  .ed,.ed.flip{grid-template-columns:1fr}
  .ed-media{min-height:52vh}
  .ed.flip .ed-media{order:0}
}


/* 11  TENT CARDS ========================================================== */

.tents{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.tent{
  background:var(--card);overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid var(--line);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media(hover:hover) and (pointer:fine){
  .tent:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(65,25,15,.16)}
}
.tph{aspect-ratio:4/3;position:relative;overflow:hidden;background-size:cover;background-position:center}
.tph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 64%,rgba(42,22,16,.2))}
.badge{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--butter);color:var(--oxblood);
  font-size:var(--label);letter-spacing:var(--track);text-transform:uppercase;
  padding:7px 13px;font-weight:700;transform:rotate(-2deg);
  box-shadow:0 3px 10px rgba(65,25,15,.2);
}
.tbody{padding:26px 26px 28px;flex:1;display:flex;flex-direction:column}
.tent h3{font-weight:400;font-size:1.55rem}
.tmeta{
  font-size:var(--meta);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:9px 0 var(--s2);font-weight:500;
}
.tent p{font-size:.95rem;color:var(--ink-2);font-weight:400;flex:1}

/* Rate block — same three units on every card so they can be compared. */
.rate{margin:var(--s3) 0 var(--s3);padding-top:18px;border-top:1px solid var(--line)}
.rate-main{display:flex;align-items:baseline;gap:9px}
.rate-main .n{font-family:'Fraunces',serif;font-size:1.8rem}
.rate-main .u{font-size:var(--meta);color:var(--muted)}
.rate-rest{
  margin-top:6px;font-size:var(--meta);color:var(--muted);
  display:flex;flex-wrap:wrap;gap:4px 12px;
}
.rate-direct{
  margin-top:9px;font-size:var(--meta);color:var(--clay-text);font-weight:600;
}

.rate-foot{
  margin-top:var(--s4);max-width:64ch;
  font-size:var(--meta);color:var(--muted);line-height:1.7;
}
.rate-foot .more{margin-left:6px}

@media(max-width:900px){.tents{grid-template-columns:1fr;max-width:440px;margin:0 auto}}


/* 12  FEATURE / FAQ LIST ================================================== */

.dl{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s5)}
.dl-item{padding:var(--s3) 0;border-top:1px solid var(--line)}
.on-tint .dl-item{border-top-color:var(--line-strong)}
.dl-item h3{font-weight:400;font-size:1.3rem;margin-bottom:var(--s1)}
.dl-item p{color:var(--ink-2);font-weight:400;font-size:.96rem}
.on-tint .dl-item p{color:var(--ink-tint)}
@media(max-width:760px){.dl{grid-template-columns:1fr}}


/* 13  WHOLE CAMP & POLAROID =============================================== */

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s6);align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:var(--s4)}}

.klist{list-style:none;margin:var(--s3) 0 var(--s4)}
.klist li{
  padding:13px 0;border-bottom:1px solid var(--line-light);
  display:flex;justify-content:space-between;gap:var(--s3);font-size:.95rem;
}
.on-tint .klist li{border-bottom-color:var(--line-strong)}
.klist b{font-family:'Fraunces',serif;font-weight:400;color:var(--peach);white-space:nowrap}
.on-tint .klist b{color:var(--oxblood)}

.polaroid{
  background:var(--white);padding:13px 13px 50px;position:relative;
  box-shadow:0 16px 40px rgba(65,25,15,.2);
}
.polaroid .ph{aspect-ratio:4/5;background-size:cover;background-position:center}
.polaroid .cap{
  font-family:'Caveat',cursive;font-size:1.2rem;color:var(--muted);
  text-align:center;margin-top:12px;
}
.tape{
  position:absolute;top:-13px;left:50%;
  transform:translateX(-50%) rotate(-2.5deg);
  width:96px;height:26px;background:rgba(248,239,192,.85);
  box-shadow:0 2px 6px rgba(65,25,15,.14);
}


/* 14  ROUTE TABLE ========================================================= */

.route{background:var(--card);border:1px solid var(--line);box-shadow:0 20px 50px rgba(65,25,15,.1)}
.rhead{
  padding:var(--s3) var(--s4);background:var(--oxblood);color:var(--paper);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
}
.rhead h3{font-weight:400;font-size:1.32rem;display:flex;align-items:center;gap:13px}
.rhead .w{
  font-size:var(--label);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--peach);font-weight:600;
}
.leg{
  display:grid;grid-template-columns:98px 1fr auto;gap:var(--s3);
  align-items:baseline;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);
}
.leg:last-of-type{border-bottom:none}
.lkm{font-family:'Fraunces',serif;font-size:1.18rem;color:var(--clay-text)}
.lt{font-weight:500}
.lt small{display:block;font-weight:400;color:var(--ink-2);margin-top:4px;font-size:.89rem}
.ltime{
  font-size:var(--meta);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;font-weight:500;
}
.rnote{
  padding:var(--s3) var(--s4);background:var(--butter);
  font-size:.94rem;color:var(--ink-tint);font-weight:400;border-top:1px solid var(--line);
}
@media(max-width:700px){
  .leg{grid-template-columns:62px 1fr;gap:var(--s2);padding:18px 20px}
  .ltime{grid-column:2}
  .rhead,.rnote{padding:20px}
}


/* 15  REVIEWS ============================================================= */

.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.rev{
  background:var(--white);border:1px solid rgba(65,25,15,.1);
  padding:var(--s4) 28px var(--s4);position:relative;
  box-shadow:0 12px 32px rgba(65,25,15,.12);
}
.rev:nth-child(1){transform:rotate(-1deg)}
.rev:nth-child(3){transform:rotate(1deg)}
.rev blockquote{font-family:'Fraunces',serif;font-weight:300;font-size:1.12rem;line-height:1.5}
.rev .who{
  margin-top:var(--s3);font-size:var(--meta);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-weight:600;
}
@media(max-width:900px){.revs{grid-template-columns:1fr}.rev{transform:none !important}}


/* 16  PARTNER CARDS ======================================================= */

.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.pcard{
  border:1px solid var(--line);background:var(--card);
  display:flex;flex-direction:column;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media(hover:hover) and (pointer:fine){
  .pcard:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(65,25,15,.16)}
}
.pbody{padding:var(--s4) 30px var(--s4);flex:1;display:flex;flex-direction:column}
.pcard .sub{
  font-size:var(--label);letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--clay-text);font-weight:700;
}
.pcard h3{font-weight:400;font-size:1.75rem;margin:11px 0 6px}
.pcard p{color:var(--ink-2);font-weight:400;margin-top:11px}
.pcard ul{list-style:none;margin:var(--s3) 0 var(--s3);flex:1}
.pcard li{
  padding:9px 0;font-size:.92rem;color:var(--ink-2);
  border-bottom:1px solid var(--line);font-weight:400;
  display:flex;gap:10px;align-items:baseline;
}
.pcard li::before{
  content:"";width:5px;height:5px;background:var(--coral);
  border-radius:50%;flex:none;transform:translateY(-2px);
}
.pcard .btn{margin-top:var(--s3)}
@media(max-width:1000px){.pgrid{grid-template-columns:1fr;max-width:460px;margin:0 auto}}


/* 17  CLOSING CTA ========================================================= */
/* The sunset is a strip at the top with the ridge sitting in it; the copy
   lives on solid oxblood underneath. Contrast is then guaranteed at any
   viewport height, which the full-bleed gradient version was not. */

.close{position:relative;background:var(--oxblood);color:var(--paper);text-align:center;overflow:hidden}
.close-sky{
  position:relative;height:clamp(120px,18vw,200px);
  background:linear-gradient(180deg,
    var(--sky) 0 26%, var(--butter) 26% 48%, var(--peach) 48% 70%, var(--coral) 70% 100%);
}
.close-ridge{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:64%}
.close-body{padding:clamp(56px,8vw,96px) 0 clamp(72px,10vw,120px)}
.close .eyebrow{color:var(--peach)}
.close h2,.close-h1{font-size:clamp(2.5rem,5.8vw,4.4rem);max-width:16ch;margin:var(--s2) auto var(--s3);color:var(--paper)}
.close h2 i{color:var(--butter)}
.close p{opacity:.94;font-weight:400;max-width:44ch;margin:0 auto var(--s4);color:var(--paper)}
.bcta{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap}
.bnote{
  margin-top:var(--s4);font-size:var(--meta);letter-spacing:.1em;
  text-transform:uppercase;color:var(--paper);opacity:.9;font-weight:500;
}


/* 18  FOOTER ============================================================== */

footer{background:var(--ink);color:var(--paper-2);padding:var(--s6) 0 var(--s4);font-size:14px}
.foot-top{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:var(--s5);
  padding-bottom:var(--s4);border-bottom:1px solid rgba(247,241,229,.16);
}
.foot-brand .mark{
  font-family:'Fraunces',serif;font-size:22px;color:var(--paper);
  margin-bottom:13px;display:flex;gap:10px;align-items:center;
}
.foot-brand p{max-width:34ch}
.foot-col h2{
  font-size:var(--label);letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--peach);margin-bottom:var(--s2);font-weight:600;
}
.foot-col a{
  display:block;color:var(--paper);text-decoration:none;
  opacity:.78;padding:7px 0;transition:opacity var(--dur-fast);font-size:14px;
}
.foot-col a:hover{opacity:1}
.foot-addr{display:block;margin-top:var(--s1);color:var(--paper-2);font-size:13px;line-height:1.6}
.foot-bot{
  padding-top:var(--s3);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:var(--s2);font-size:12px;letter-spacing:.08em;color:var(--paper-2);
}
@media(max-width:1000px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr;gap:var(--s4)}}
.foot-sign{font-family:'Caveat',cursive;font-size:1.3rem;letter-spacing:0;color:var(--peach)}

/* Comfortable thumb targets on touch screens; tighter on desktop where
   the cursor is precise and the extra padding would loosen the rhythm. */
@media(max-width:900px){
  .foot-col a{padding:11px 0}
  .more{padding:13px 0}
  .navlinks a:not(.btn){padding:14px 0}
}


/* 19  STICKY MOBILE CTA =================================================== */

.mobilebook{display:none}
@media(max-width:900px){
  .mobilebook{
    display:flex;align-items:center;justify-content:center;gap:.4em;
    position:fixed;left:0;right:0;bottom:0;z-index:100;
    min-height:56px;padding:16px;
    background:var(--coral);color:var(--oxblood);
    font-size:12px;font-weight:600;letter-spacing:var(--track);
    text-transform:uppercase;text-decoration:none;
    box-shadow:0 -6px 26px rgba(65,25,15,.26);
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  /* Keep the last line of the hero clear of the sticky bar on short phones. */
  .hero{min-height:calc(100svh - 56px)}
  .hero-body{padding-bottom:calc(40px + var(--s3))}
  body[data-menu="open"] .mobilebook{display:none}
}



/* ── Artwork slots ─────────────────────────────────────────────────────
   The motif artwork was removed — you're supplying the real vectors.
   When they arrive, three slots are waiting:
     .scene       a full-width horizon band, sits above the footer
     .hero-art    the empty right half of the hero
     .lead-icon   a small mark beside a section eyebrow
   Add the markup back and style it here. Nothing else depends on them. */

.lead-icon{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}

/* ── Tent card photo gallery ──────────────────────────────────────────── */

.gal{position:relative;aspect-ratio:4/3;overflow:hidden}
.gal-track{display:flex;height:100%;transition:transform var(--dur) var(--ease)}
.gal-slide{
  flex:0 0 100%;height:100%;background-size:cover;background-position:center;
  position:relative;
}
/* Real <img> rather than a background, so Google Images can index the
   photos and screen readers get the alt text. The gradient placeholder
   sits behind and shows through until the file exists. */
.gal-slide img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.gal-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:38px;height:38px;border:none;cursor:pointer;
  background:rgba(65,25,15,.82);color:var(--paper);
  font-size:17px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity var(--dur), background var(--dur-fast), transform var(--dur-press) ease-out;
}
@media(hover:hover) and (pointer:fine){.gal:hover .gal-nav{opacity:1}}
.gal-nav:focus-visible{opacity:1}
.gal-nav:active{transform:scale(.92)}
@media(hover:hover) and (pointer:fine){.gal-nav:hover{background:var(--oxblood)}}
.gal-prev{left:0}.gal-next{right:0}
.gal-dots{
  position:absolute;bottom:9px;left:0;right:0;z-index:3;
  display:flex;justify-content:center;gap:7px;
}
.gal-dots button{
  width:26px;height:26px;padding:0;border:none;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.gal-dots button::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:rgba(247,241,229,.55);box-shadow:0 1px 3px rgba(65,25,15,.5);
  transition:background var(--dur-fast), transform var(--dur-fast);
}
.gal-dots button[aria-current="true"]::before{background:var(--paper);transform:scale(1.35)}
.gal .badge{z-index:4}
@media(max-width:900px){.gal-nav{opacity:1;background:rgba(65,25,15,.82)}}
@media(prefers-reduced-motion:reduce){.gal-track{transition:none}}

/* 20  MOTION & FOCUS ====================================================== */

/* .rise is applied to section leads only, not to every card — one reveal
   per section rather than a page of independently animating boxes.
   Gated on .js so a script failure can never leave the page blank. */
.js .rise{
  opacity:0;transform:translateY(22px);
  transition:opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.js .rise.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .js .rise{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .tent:hover,.pcard:hover,.btn:hover{transform:none}
  .btn:active,.opt:active,.gal-nav:active,.bbtn:active{transform:none}
  .menu,.menu[data-open]{transition:none}
}

:focus-visible{outline:2.5px solid var(--clay-text);outline-offset:3px}
.on-dark :focus-visible,nav :focus-visible,.menu :focus-visible,footer :focus-visible,
.bookbar :focus-visible,.close :focus-visible{outline-color:var(--peach)}


/* 21  UTILITIES ===========================================================
   Replace the inline style="" attributes the pages used to carry. If a
   page needs a one-off, add it here with a name, not in the HTML.      */

/* Three heading sizes below the section h2 — use these, not clamp() inline. */
.h-statement{font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.2;margin-top:var(--s3)}
.h-feature{font-size:clamp(1.9rem,4vw,2.9rem);margin:var(--s2) 0 var(--s3)}
.h-compact{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:var(--s2) 0 var(--s3)}
.lead .h-compact{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:var(--s2) 0 0}
.foot-brand .mark .dev{font-size:15px;opacity:.7}
.on-dark h2{color:var(--paper)}

/* Body copy outside a .lead */
.copy{font-weight:400;color:var(--ink-2);max-width:56ch}
.copy + .copy{margin-top:var(--s2)}
.on-tint .copy{color:var(--ink-tint)}
.on-dark .copy{color:var(--paper-2);max-width:46ch}

.center{text-align:center}
.center .copy,.center .lead p{margin-left:auto;margin-right:auto}
.lead--spaced{margin-bottom:var(--s5)}
.lead--center{text-align:center;margin:0 auto var(--s5)}
.lead--center p{margin-left:auto;margin-right:auto}
.head-row--flush{margin-bottom:0}
.route--spaced{margin-bottom:var(--s4)}
.stack-top{margin-top:var(--s4)}
.tilt-left{transform:rotate(-2deg)}
.tilt-right{transform:rotate(2deg)}
.rate-foot--center{margin:var(--s2) auto 0;text-align:center}
.review-link{margin:var(--s3) auto 0}

/* 404 */
.page-404{min-height:100svh;display:flex;flex-direction:column}
.page-404 .close-body{flex:1;display:flex;align-items:center}


/* 22  BRAND BLOCKS (Sept 2026, from the brand playbook) ===================
   Sub-page hero on pine or oxblood, the people polaroids, the ways-to-come
   list, and the small photo row on landing pages.                        */

.phero.on-dark h1{color:var(--paper)}
.phero.on-dark h1 i{color:var(--peach)}
.phero.on-dark p{color:var(--paper-2)}
.phero .more{margin-top:var(--s3)}

/* Who looks after you: real people, on the same polaroids as the story. */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5) var(--s4);align-items:start}
.person .polaroid{max-width:300px;margin:0 auto}
.person:nth-child(1) .polaroid{transform:rotate(-2deg)}
.person:nth-child(3) .polaroid{transform:rotate(1.5deg)}
.person h3{font-weight:400;font-size:1.45rem;margin-top:var(--s3);text-align:center}
.person p{font-weight:400;color:var(--ink-2);max-width:32ch;margin:var(--s1) auto 0;text-align:center}
@media(max-width:900px){.people{grid-template-columns:1fr;max-width:360px;margin:0 auto}}

/* Ways to come: a plain index of named stays, not a card grid. */
.ways{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--s5)}
.ways a{
  display:grid;grid-template-columns:1fr auto;gap:4px var(--s3);align-items:baseline;
  padding:var(--s3) 0;border-top:1px solid var(--line-strong);text-decoration:none;color:inherit;
}
.ways b{font-family:'Fraunces',serif;font-weight:400;font-size:1.35rem;letter-spacing:-.01em}
.ways span{grid-column:1;font-weight:400;font-size:.95rem;color:var(--ink-tint)}
.ways a::after{content:"\2192";grid-row:1 / span 2;grid-column:2;align-self:center;color:var(--oxblood);transition:transform var(--dur) var(--ease)}
@media(hover:hover) and (pointer:fine){.ways a:hover::after{transform:translateX(6px)}}
@media(max-width:760px){.ways{grid-template-columns:1fr}}

/* Two short columns side by side (Ridge Letters | gift vouchers). */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}
.pair .btn{margin-top:var(--s3)}
@media(max-width:880px){.pair{grid-template-columns:1fr;gap:var(--s5)}}

/* A dish list: name left, a short note right. */
.dishes{list-style:none;margin:var(--s3) 0 0}
.dishes li{padding:12px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:var(--s3)}
.dishes b{font-family:'Fraunces',serif;font-weight:400;font-size:1.1rem}
.dishes span{color:var(--muted);font-size:.9rem;font-weight:400;text-align:right}
.dish-note{margin-top:var(--s3);font-size:var(--meta);color:var(--muted);line-height:1.7;max-width:56ch}
.dish-h{font-weight:400;font-size:1.5rem;margin-top:var(--s5)}
.dish-h:first-child{margin-top:0}
.dish-h + .copy{margin-top:var(--s1)}

@media(prefers-reduced-motion:reduce){.ways a::after{transition:none}}


/* 23  GUEST PHOTOS & INSTAGRAM ============================================
   Guest photo wall under the reviews, an optional photo on a review card,
   and the Instagram block (styled grid from a feed, or Instagram's own
   embeds when you list posts by hand).                                   */

.rev-photo{margin:calc(var(--s4) * -1) -28px var(--s3);overflow:hidden;aspect-ratio:4/3;background:var(--line)}
.rev-photo img{width:100%;height:100%;object-fit:cover;display:block}
.rev-stars{color:var(--clay-text);letter-spacing:.18em;font-size:.9rem;margin-bottom:var(--s1)}
.rev .who a{color:inherit}
.revs{align-items:start}
.guestwall .rate-foot{margin-top:var(--s4)}

.guestwall{margin-top:var(--s6)}
.guestwall[hidden]{display:none}
.guestwall-h{text-align:center;margin-bottom:var(--s4)}
.gwall{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.gshot{background:var(--white);padding:10px 10px 0;box-shadow:0 10px 26px rgba(65,25,15,.12)}
.gshot:nth-child(4n+1){transform:rotate(-1.2deg)}
.gshot:nth-child(4n+3){transform:rotate(1deg)}
.gshot a{display:block}
.gshot img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
.gshot figcaption{
  font-size:var(--meta);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:600;padding:10px 2px 12px;
}
@media(max-width:900px){.gwall{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gshot{transform:none !important}}

.ig:empty{display:none}
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s2)}
.ig-post{position:relative;display:block;overflow:hidden;aspect-ratio:1/1;background:var(--line)}
.ig-post img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease)}
.ig-post--video::after{
  content:"\25B6";position:absolute;top:10px;right:12px;color:var(--white);
  font-size:.8rem;text-shadow:0 1px 4px rgba(0,0,0,.5);
}
@media(hover:hover) and (pointer:fine){.ig-post:hover img{transform:scale(1.04)}}
@media(max-width:900px){.ig-grid{grid-template-columns:repeat(3,1fr)}}
.ig-embeds{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s3);align-items:start}
.ig-embeds .instagram-media{margin:0 !important;min-width:0 !important;width:100% !important}
.ig-follow{text-align:center;margin-top:var(--s4)}
@media(prefers-reduced-motion:reduce){.ig-post img{transition:none}}


/* 24  SITE UPDATE, OCT 2026 ==============================================
   Wider nav (six links), dropdown answers, the route map, the moving
   hero on the home page, per-tent amenities, values, footer small print. */

/* Six nav links need more room before the menu button takes over */
.navlinks{gap:22px}
@media(max-width:1180px){
  .navlinks{display:none}
  .menu-btn{display:flex}
  .menu{display:block}
}

/* Dropdown answers (FAQ, "different reasons") */
.acc{border-top:1px solid var(--line)}
.on-tint .acc{border-top-color:var(--line-strong)}
.acc details{border-bottom:1px solid var(--line)}
.on-tint .acc details{border-bottom-color:var(--line-strong)}
.acc summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:baseline;gap:var(--s3);padding:var(--s3) 0;
  font-family:'Fraunces',serif;font-weight:400;font-size:1.25rem;letter-spacing:-.01em;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-family:'Archivo',sans-serif;font-size:1.3rem;line-height:1;color:var(--oxblood);transition:transform var(--dur) var(--ease)}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc summary small{display:block;font-family:'Archivo',sans-serif;font-size:.92rem;font-weight:400;color:var(--ink-tint);margin-top:4px;letter-spacing:0}
.acc .acc-body{padding:0 0 var(--s3);max-width:62ch}
.acc .acc-body p{font-weight:400;margin-bottom:var(--s2)}
.acc .acc-body p:last-child{margin-bottom:0}
.acc .acc-body a.more{display:inline-block;margin-top:var(--s1)}
.acc--two{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s5);border-top:none}
.acc--two details:nth-child(-n+2){border-top:1px solid var(--line-strong)}
@media(max-width:760px){.acc--two{grid-template-columns:1fr}.acc--two details:nth-child(2){border-top:none}}
@media(prefers-reduced-motion:reduce){.acc summary::after{transition:none}}

/* Moving hero on the home page: the animated ridge replaces the photo */
.hero-anim{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:88% 62%}

/* Route map in Getting here */
.routemap{margin-top:var(--s4)}
.routemap svg{width:100%;height:auto;display:block}
.routemap .rm-line{fill:none;stroke:rgba(247,241,229,.55);stroke-width:2}
.routemap .rm-line--rail{stroke-dasharray:2 6;stroke-linecap:round}
.routemap .rm-line--air{stroke-dasharray:10 8}
.routemap .rm-node{fill:var(--paper,#F7F1E5)}
.routemap .rm-camp{fill:var(--clay,#C97A4E)}
.routemap text{fill:#F7F1E5;font-family:'Archivo',sans-serif;font-size:13px}
.routemap .rm-name{font-family:'Fraunces',serif;font-size:17px}
.routemap .rm-sub{font-size:12px;opacity:.75}
.rm-key{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s2);font-size:.85rem;opacity:.8}
.rm-key span::before{content:"";display:inline-block;width:26px;height:0;border-top:2px solid currentColor;vertical-align:middle;margin-right:8px}
.rm-key .k-rail::before{border-top-style:dotted}
.rm-key .k-air::before{border-top-style:dashed}

/* Per-tent amenities on tents.html */
.amen{columns:2;column-gap:var(--s3);margin:var(--s2) 0 var(--s3);padding:0;list-style:none;font-size:.9rem;font-weight:400}
.amen li{break-inside:avoid;padding:3px 0 3px 16px;position:relative}
.amen li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--clay,#C97A4E)}
.tent h3 a{color:inherit;text-decoration:none}
.tent .tlink{display:inline-block;margin:0 0 var(--s2);font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}

/* Values list on the story page */
.values{counter-reset:v;border-top:1px solid var(--line)}
.values li{list-style:none;counter-increment:v;display:grid;grid-template-columns:3rem 1fr;gap:var(--s2);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.values li::before{content:counter(v,decimal-leading-zero);font-family:'Fraunces',serif;font-size:1.1rem;color:var(--oxblood)}
.values h3{font-weight:400;font-size:1.45rem;margin-bottom:var(--s1)}
.values p{font-weight:400;max-width:60ch}

/* Retreat banner */
.banner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s3)}
.banner .lead{max-width:60ch}

/* Footer small print */
.foot-print{font-size:.82rem;opacity:.75;margin:var(--s4) 0 0;max-width:80ch}
.foot-print a{color:inherit}
.split > .routemap{grid-column:1 / -1}
[data-studio-link][hidden]{display:none !important}


/* 24  OCTOBER 2026 ========================================================
   The DugDug typeface, five colours taken from the brand artwork, and the
   illustrations (img/art/). Everything new lives here.               */

@font-face{
  font-family:'DugDug';
  src:url('/fonts/dugdug.woff2') format('woff2');
  font-display:swap;
}
:root{
  /* From the brand artwork files (the road weave, the haldu tree, the
     village). Surfaces only, except --marigold, which is decorative.   */
  --sage:#E0E4CC;
  --lagoon:#A7DBD8;
  --haldu:#F8F09A;
  --sky-light:#C5E9F2;
  --marigold:#F38630;
}
.bg-sage{background:var(--sage)}
.bg-lagoon{background:var(--lagoon)}
.bg-haldu{background:var(--haldu)}
.bg-pine .eyebrow{color:var(--haldu)}
.bg-pine .lead p,.bg-pine .values p{color:var(--paper-2)}
.bg-pine .values h3{color:var(--paper)}

/* The wordmark, set in the brand's own face. Devanagari stays in Archivo. */
.mark{font-family:'DugDug','Fraunces',serif !important;font-weight:400;letter-spacing:.04em;text-transform:uppercase}
.brand .mark{font-size:27px;line-height:1}
.foot-brand .mark{font-size:46px;line-height:1}
.mark .dev{font-family:'Archivo',system-ui,sans-serif;text-transform:none;letter-spacing:0}

/* Hero rating chips: review counts */
.chip-n{font-size:.92em;opacity:.75;font-weight:400}

/* --- Illustrations standing in for photos not yet taken ----------------
   A slot with class "ill" shows its drawing until a photo loads; site.js
   then adds .has-photo and the photo takes over.                      */
.ill-rider{--ill:url('/img/art/rider.svg');--ill-bg:var(--sky-light);--ill-size:78%}
.ill-kitchen{--ill:url('/img/art/kitchen.svg');--ill-bg:var(--haldu);--ill-size:84%}
.ill-gaon{--ill:url('/img/art/gaon.svg');--ill-bg:var(--sage);--ill-size:92%}
.ill-village{--ill:url('/img/art/village.svg');--ill-bg:var(--peach);--ill-size:88%}
.ill:not(.has-photo){
  background-color:var(--ill-bg);
  background-image:var(--ill);
  background-repeat:no-repeat;
  background-position:center 62%;
  background-size:var(--ill-size) auto;
}

/* --- The road to Jangalia Gaon -----------------------------------------
   The one illustrated set piece: haldu trees, monkeys, the signpost, and
   the rider, who rides in once when the scene comes into view.       */
.scene{
  position:relative;overflow:hidden;
  background:var(--sky-light);
  aspect-ratio:3/1;max-height:480px;width:100%;
}
.sc{position:absolute;display:block;width:auto;max-width:none}
.sc-road{
  position:absolute;left:0;right:0;bottom:0;height:13%;
  background:url('/img/art/weave-tile.svg') repeat-x 0 50%/auto 56%, var(--butter);
  border-bottom:6px solid var(--oxblood);
}
.sc-haldu--l{left:7%;bottom:12%;height:84%}
.sc-haldu--r{left:68%;bottom:12%;height:84%}
.sc-monkey--l{left:8.6%;bottom:50%;height:19%}
.sc-monkey--r{left:73.6%;bottom:56%;height:18%}
.sc-sign{left:84%;bottom:12%;height:42%}
.sc-rider{left:38%;bottom:11.5%;height:40%}
.sc-note{
  position:absolute;font-family:'Caveat',cursive;font-size:clamp(1rem,1.6vw,1.35rem);
  color:var(--ink);line-height:1;white-space:nowrap;
}
.sc-note::after{
  content:'';position:absolute;left:50%;top:calc(100% + 4px);
  height:var(--lead,40px);border-left:1.5px dotted currentColor;
}
.sc-note--haldu{left:17%;top:14%;--lead:52px}
.sc-note--monkey{left:62%;top:16%;--lead:58px}
.sc-note--rider{left:46%;top:30%;--lead:46px}
.sc-note--sign{left:84%;top:28%;--lead:34px}

.scene--ride{aspect-ratio:5/1;max-height:300px;background:var(--sky)}
.scene--ride .sc-haldu--l{left:6%;height:86%}
.scene--ride .sc-sign{left:80%;height:58%}
.scene--ride .sc-rider{left:44%;height:60%}
.scene--ride .sc-note--rider{left:52%;top:8%;--lead:22px}

/* Motion: the rider arrives. One move, once. */
.js .sc-rider{transform:translateX(-160%);transition:transform 2.4s var(--ease)}
.js .scene.in .sc-rider{transform:none}
.js .sc-note--rider{opacity:0;transition:opacity .6s var(--ease) 2s}
.js .scene.in .sc-note--rider{opacity:1}

@media(max-width:760px){
  .scene{aspect-ratio:4/3}
  .sc-haldu--l{left:-2%;height:78%}
  .sc-monkey--l{left:0;bottom:46%;height:15%}
  .sc-haldu--r,.sc-monkey--r,.sc-note--monkey{display:none}
  .sc-sign{left:70%;height:34%}
  .sc-rider{left:22%;height:34%}
  .sc-note--haldu{left:20%;top:12%;--lead:40px}
  .sc-note--rider{left:34%;top:38%;--lead:44px}
  .sc-note--sign{left:72%;top:40%;--lead:26px}
  .scene--ride{aspect-ratio:2.4/1}
  .scene--ride .sc-rider{left:30%;height:52%}
  .scene--ride .sc-sign{left:74%;height:52%}
  .scene--ride .sc-note--rider{left:40%;top:6%}
}

/* --- Village strip: the ridge above every footer ----------------------- */
.village-strip{
  position:relative;height:118px;overflow:hidden;
  background:var(--peach);
}
.vs{position:absolute;bottom:0;display:block;width:auto}
.vs-oak1{left:3%;height:72%}
.vs-hut{left:11%;height:60%}
.vs-haldu{left:21%;height:92%}
.vs-house{left:52%;height:44%}
.vs-oak2{left:74%;height:80%}
.vs-cow{left:83%;height:40%}
.vs-oak3{left:93%;height:56%}
@media(max-width:760px){
  .village-strip{height:84px}
  .vs-haldu,.vs-oak3{display:none}
  .vs-oak1{left:2%}.vs-hut{left:16%}.vs-house{left:42%}.vs-oak2{left:72%}.vs-cow{left:82%}
}

/* --- Art band under a page hero --------------------------------------- */
.artband{display:flex;justify-content:center;padding:0 var(--s3) var(--s4)}
.artband--peach{background:var(--peach)}
.artband img{width:min(640px,100%);height:auto}

/* --- Date checker: send button under the total, fully booked nights --- */
.q-send{display:flex;margin-top:var(--s3);width:100%}
.q-reply{font-size:var(--meta);opacity:.8;margin-top:var(--s1);text-align:center}
.dp-keys{display:flex;gap:var(--s3);flex-wrap:wrap}
.dp-day.is-full{text-decoration:line-through;opacity:.45}
.dp-key-full{display:inline-block;width:14px;height:2px;background:currentColor;margin-right:6px;vertical-align:middle}

/* The sticky bar steps aside while the checker or quote is on screen */
@media(max-width:900px){
  .mobilebook{transition:transform var(--dur-slow) var(--ease)}
  body.book-in-view .mobilebook{transform:translateY(110%)}
}

@media(prefers-reduced-motion:reduce){
  .js .sc-rider,.js .sc-note--rider{transform:none;opacity:1;transition:none}
  .mobilebook{transition:none}
}