/* ==========================================================================
   Visama Explorer · site layer on top of scrollcraft.css

   Every value here is taken from the brand books, not invented:

     VHG - BRAND BOOK.pdf        Deep Canopy #333822, Leaf Olive #6C7849,
                                 Sage Mist #E8E9E2, Rice Paper #F3F4F1,
                                 Tent Linen #D9CDB4, Teak #8C6D4F.
                                 Balance: paper 45 / canopy 25 / olive 15 /
                                 linen 10 / teak 5. Pattern: falling leaves,
                                 tone on tone, never behind body text.

     VXN - Brandbook.pdf         Nan Indigo #173961, Deep Indigo #0F2440,
                                 Cyanotype Blue #96B5DA, Explorer Olive
                                 #6C7849, Forest Night #1A2E1C, Temple Gold
                                 #B8942A, Rice Straw #C9A96E, Ivory Linen
                                 #FAF6EE, Indigo Wash #D6E1EE.

     VXKK - Brandbook.pdf        Koah Ker Red #601D22, Lacquer Red #3D1216,
                                 Saffron Gold #C7872B, Temple Olive #4B3C15,
                                 Gilt #E4C17E, Sandstone #C1B884, Laterite
                                 #9A4A2B, Ivory Silk #FAF5EC, Rose Wash
                                 #F1E1DC.

   Type, from both camp books: Playfair Display for headlines, quotes and
   names (Regular and Italic, second display line italic); DM Sans Light for
   body at 1.65 leading; overline DM Sans SemiBold, caps, 300 tracking. Thai
   sets in Prompt, Khmer in Kantumruy Pro.

   The parent level is the Visama Explorer COLLECTION, which both books
   define as the burst, the signature and EXPLORER in Explorer Olive; the
   place name is the only part that changes. So the umbrella borrows neither
   camp's colour: it works in Explorer Olive on the VHG neutrals, and each
   camp brings its own indigo or red underneath.
   ========================================================================== */

:root {
  /* ---- the collection spine ---- */
  --canopy:      #333822;   /* Deep Canopy  */
  --visama-ink:  #1C2119;   /* Visama Ink   */
  --olive-light: #A7B383;   /* Olive Light  */
  --ivory:       #FAF6EE;   /* Ivory        */
  /* The green of the Visama flower, sampled off the master artwork
     (VXN-logowhite-01.png): #6C7849 across 11,661 pixels of the burst. Same
     value as VHG's Leaf Olive and the VXN book's "Explorer Olive". The NAME
     of the colour is still being decided; the hex is not. One line to swap. */
  /* CONFIRMED against the owner's master vector (VXN_Logo_RGB_Black.svg) and
     byte-identical to VHG's Leaf Olive: the thread from the group brand down
     to the collection. Parent mark and parent pages only; it never touches a
     camp lockup. */
  --explorer-olive: #6C7849;
  --visama-green:    var(--explorer-olive);
  --visama-green-hi: var(--olive-light);
  --sage:     #E8E9E2;   /* Sage Mist    */
  --paper:    #F3F4F1;   /* Rice Paper   */
  --linen:    #D9CDB4;   /* Tent Linen   */
  --teak:     #8C6D4F;   /* Teak         */
  --ink:      #1C2119;
  --ink-soft: #64694F;

  /* ---- Visama Explorer Nan ---- */
  --nan:        #173961;  /* Nan Indigo     */
  --nan-deep:   #0F2440;  /* Deep Indigo    */
  --nan-cyano:  #96B5DA;  /* Cyanotype Blue */
  --nan-forest: #1A2E1C;  /* Forest Night   */
  --nan-gold:   #B8942A;  /* Temple Gold    */
  --nan-straw:  #C9A96E;  /* Rice Straw     */
  --nan-ivory:  #FAF6EE;  /* Ivory Linen    */
  --nan-wash:   #D6E1EE;  /* Indigo Wash    */
  --nan-gold-hi:#E6CB86;

  /* ---- Visama Explorer Koah Ker ---- */
  --kk:        #601D22;   /* Koah Ker Red */
  --kk-deep:   #3D1216;   /* Lacquer Red  */
  --kk-saffron:#C7872B;   /* Saffron Gold */
  --kk-olive:  #4B3C15;   /* Temple Olive */
  --kk-gilt:   #E4C17E;   /* Gilt         */
  --kk-stone:  #C1B884;   /* Sandstone    */
  --kk-lat:    #9A4A2B;   /* Laterite     */
  --kk-ivory:  #FAF5EC;   /* Ivory Silk   */
  --kk-wash:   #F1E1DC;   /* Rose Wash    */

  /* house = the camp the current page belongs to. Parent pages stay olive. */
  --house:      var(--visama-green);
  --house-deep: var(--canopy);
  --house-hi:   var(--linen);
  /* The flower takes the colour of whatever it stands for. Two slots make the
     header one component: --visama-mark for the flower, and the place-name
     image for the word under EXPLORER. */
  --visama-mark:    var(--visama-green);   /* on light grounds */
  --visama-mark-hi: var(--olive-light);     /* on the olive itself */

  /* scrollcraft token overrides */
  --sc-canvas: #F3F4F1;
  --sc-surface: #E8E9E2;
  --sc-ink: #1C2119;
  --sc-ink-soft: #64694F;
  --sc-accent: #6C7849;
  --sc-accent-ink: #F3F4F1;
  --sc-font-display: "Playfair Display", Georgia, serif;
  --sc-font-text: "DM Sans", Arial, sans-serif;
  --sc-shadow-color: 75 20% 8%;
  --thai: "Prompt", "DM Sans", sans-serif;
  --khmer: "Kantumruy Pro", "DM Sans", sans-serif;

  --bar-h: 72px;
  --seam: 50%;
  --radius: 3px;
  color-scheme: light;
}

html[data-house="nan"] {
  --visama-mark: var(--nan);
  --visama-mark-hi: var(--nan-cyano);
  --house: var(--nan);
  --house-deep: var(--nan-deep);
  --house-hi: var(--nan-gold-hi);
}
html[data-house="kk"] {
  --visama-mark: var(--kk);
  --visama-mark-hi: var(--kk-gilt);
  --house: var(--kk);
  --house-deep: var(--kk-deep);
  --house-hi: var(--kk-gilt);
}

/* ---------------------------------------------------------------- grounds
   Parent grounds use only VHG colours; camp grounds only that camp's book. */
.g-paper  { --sc-canvas:#F3F4F1; --sc-surface:#E8E9E2; --sc-ink:#1C2119; --sc-ink-soft:#64694F; --sc-accent:#5C673D; --sc-accent-ink:#F3F4F1; background:var(--sc-canvas); color:var(--sc-ink); }
.g-sage   { --sc-canvas:#E8E9E2; --sc-surface:#DCDED3; --sc-ink:#1C2119; --sc-ink-soft:#5E6349; --sc-accent:#55603A; --sc-accent-ink:#F3F4F1; background:var(--sc-canvas); color:var(--sc-ink); }
.g-linen  { --sc-canvas:#D9CDB4; --sc-surface:#CDBF9F; --sc-ink:#1C2119; --sc-ink-soft:#5A553F; --sc-accent:#4F5934; --sc-accent-ink:#F3F4F1; background:var(--sc-canvas); color:var(--sc-ink); }
.g-canopy { --sc-canvas:#333822; --sc-surface:#404631; --sc-ink:#F3F4F1; --sc-ink-soft:#BEC2AC; --sc-accent:#D9CDB4; --sc-accent-ink:#333822; background:var(--sc-canvas); color:var(--sc-ink); }
.g-olive  { --sc-canvas:#6C7849; --sc-surface:#7A8754; --sc-ink:#F3F4F1; --sc-ink-soft:#DDE1CE; --sc-accent:#E8E9E2; --sc-accent-ink:#333822; background:var(--sc-canvas); color:var(--sc-ink); }

/* Visama Explorer Nan */
.g-nan     { --sc-canvas:#173961; --sc-surface:#1E4879; --sc-ink:#FAF6EE; --sc-ink-soft:#BCCDE3; --sc-accent:#E6CB86; --sc-accent-ink:#0F2440; background:var(--sc-canvas); color:var(--sc-ink); }
.g-nan-dp  { --sc-canvas:#0F2440; --sc-surface:#173961; --sc-ink:#FAF6EE; --sc-ink-soft:#B4C6DE; --sc-accent:#E6CB86; --sc-accent-ink:#0F2440; background:var(--sc-canvas); color:var(--sc-ink); }
.g-nan-lt  { --sc-canvas:#FAF6EE; --sc-surface:#EFEAE0; --sc-ink:#14243C; --sc-ink-soft:#4A5A71; --sc-accent:#85660F; --sc-accent-ink:#FAF6EE; background:var(--sc-canvas); color:var(--sc-ink); }
.g-nan-wash{ --sc-canvas:#E7EEF5; --sc-surface:#D6E1EE; --sc-ink:#14243C; --sc-ink-soft:#44566E; --sc-accent:#7D600E; --sc-accent-ink:#FAF6EE; background:var(--sc-canvas); color:var(--sc-ink); }
.g-nan-for { --sc-canvas:#1A2E1C; --sc-surface:#253D27; --sc-ink:#FAF6EE; --sc-ink-soft:#CDD3BC; --sc-accent:#E6CB86; --sc-accent-ink:#1A2E1C; background:var(--sc-canvas); color:var(--sc-ink); }

/* Visama Explorer Koah Ker */
.g-kk      { --sc-canvas:#601D22; --sc-surface:#73262B; --sc-ink:#FAF5EC; --sc-ink-soft:#E3C3B4; --sc-accent:#E4C17E; --sc-accent-ink:#3D1216; background:var(--sc-canvas); color:var(--sc-ink); }
.g-kk-dp   { --sc-canvas:#3D1216; --sc-surface:#511A1F; --sc-ink:#FAF5EC; --sc-ink-soft:#D9B8A9; --sc-accent:#E4C17E; --sc-accent-ink:#3D1216; background:var(--sc-canvas); color:var(--sc-ink); }
.g-kk-lt   { --sc-canvas:#FAF5EC; --sc-surface:#F1E1DC; --sc-ink:#2E1114; --sc-ink-soft:#6E5552; --sc-accent:#8A5E1B; --sc-accent-ink:#FAF5EC; background:var(--sc-canvas); color:var(--sc-ink); }
.g-kk-ol   { --sc-canvas:#4B3C15; --sc-surface:#5C4A1C; --sc-ink:#FAF5EC; --sc-ink-soft:#DBD0AF; --sc-accent:#E4C17E; --sc-accent-ink:#2E2208; background:var(--sc-canvas); color:var(--sc-ink); }

html { background: var(--paper); }
body {
  font-family: var(--sc-font-text);
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-size: 17px;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:lang(th), .th { font-family: var(--thai); font-style: normal; letter-spacing: 0; }
:lang(km), .km { font-family: var(--khmer); font-style: normal; letter-spacing: 0; }
img { display: block; max-width: 100%; }
/* Every <img> carries width/height attributes so the browser can reserve the
   right box before the file lands. A CSS rule that then sets only the width
   would inherit the attribute height and squash the picture, so unset it here.
   :where() keeps this at zero specificity, so the lockups that are sized by
   height instead still win. */
:where(img[width][height]) { height: auto; }
/* A logo is approved artwork: whatever box a rule gives it, the drawing keeps
   its own proportions. The owner caught the footer mark stretched to the
   height of its width/height attributes on a phone; object-fit makes that
   impossible, and every lockup rule below sets one side and leaves the other
   on auto. */
img[src*="/brand/"] { object-fit: contain; }

/* --------------------------------------------------------------- typography */
.d { font-family: var(--sc-font-display); font-weight: 400; letter-spacing: -0.018em; line-height: 1.02; text-wrap: balance; margin: 0; }
.d em, .d i { font-style: italic; }
.d-xxl { font-size: clamp(3rem, 1rem + 8vw, 8.6rem); line-height: .94; letter-spacing: -0.032em; }
.d-xl  { font-size: clamp(2.6rem, 1.3rem + 4.8vw, 5.6rem); line-height: .98; letter-spacing: -0.026em; }
.d-lg  { font-size: clamp(2.1rem, 1.3rem + 3vw, 4rem); }
.d-md  { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.8rem); line-height: 1.08; }
.d-sm  { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); line-height: 1.2; }

.eyebrow {
  font: 500 clamp(0.68rem, 0.64rem + 0.12vw, 0.76rem)/1.2 var(--sc-font-text);
  color: var(--sc-ink-soft); margin: 0;
}
.lede { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); line-height: 1.5; max-width: 34ch; text-wrap: pretty; margin: 0; }
.body { font-size: 1.02rem; line-height: 1.68; max-width: 60ch; color: var(--sc-ink-soft); text-wrap: pretty; margin: 0; }
.body + .body { margin-top: 1.1em; }
.body strong { color: var(--sc-ink); font-weight: 500; }
.muted { color: var(--sc-ink-soft); }
.wrap { width: 100%; max-width: 84rem; margin-inline: auto; padding-inline: var(--sc-gutter); }
.wrap--narrow { max-width: 62rem; }

/* ------------------------------------------------------------------ buttons */
.btn {
  --b-bg: var(--sc-accent); --b-ink: var(--sc-accent-ink);
  display: inline-flex; align-items: center; gap: .65em;
  min-height: 46px; padding: 0 1.4em;
  background: var(--b-bg); color: var(--b-ink);
  font: 500 .95rem/1 var(--sc-font-text); letter-spacing: 0;
  border: 1px solid var(--b-bg); border-radius: 999px;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 180ms var(--sc-ease-out), color 180ms, transform 120ms, border-color 180ms;
}
.btn::after { content: "\2192"; font-size: 1.05em; line-height: 1; }
.btn:active { transform: scale(.97); }
.btn--ghost { background: transparent; color: var(--sc-ink); border-color: color-mix(in oklab, var(--sc-ink) 38%, transparent); }
@media (hover: hover) {
  .btn:hover { background: color-mix(in oklab, var(--b-bg) 84%, var(--sc-ink)); }
  .btn--ghost:hover { background: color-mix(in oklab, var(--sc-ink) 9%, transparent); border-color: var(--sc-ink); }
}
.tlink {
  display: inline-block; color: inherit; text-decoration: none; font-size: .95rem;
  border-bottom: 1px solid color-mix(in oklab, currentColor 40%, transparent);
  padding-bottom: 3px; transition: border-color 180ms, color 180ms;
}
.tlink::after { content: " \2192"; }
.tlink:hover { border-color: currentColor; }

/* ================================================================== the bar */
.bar {
  --mark-ink: var(--visama-mark-hi);
  position: fixed; inset: 0 0 auto 0; z-index: 70; height: var(--bar-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px; padding-inline: clamp(14px, 3vw, 34px);
  color: var(--bar-ink, #F3F4F1);
  transition: background-color 420ms var(--sc-ease-out), color 420ms, box-shadow 420ms;
}
html[data-tone="light"] .bar { --bar-ink: #1C2119; --mark-ink: var(--visama-mark); }
/* Over photography the header gets a calm ground of its own: a soft band of
   canopy behind the lockup, so the flower and the place name never sit on a
   bright sky. It fades away once the bar is on its own paper. */
.bar::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 -56px 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(14 16 10 / .72), rgb(14 16 10 / .38) 55%, rgb(14 16 10 / 0));
  transition: opacity 420ms var(--sc-ease-out);
}
.bar.is-stuck::before, html[data-tone="light"] .bar::before { opacity: 0; }
.bar.is-stuck {
  --mark-ink: var(--visama-mark);
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  --bar-ink: #1C2119; box-shadow: 0 1px 0 rgb(33 36 26 / .1);
}
html[data-house="nan"] .bar.is-stuck { background: color-mix(in oklab, var(--nan-ivory) 90%, transparent); }
html[data-house="kk"]  .bar.is-stuck { background: color-mix(in oklab, var(--kk-ivory) 90%, transparent); }

/* One brand component: the Visama mark, plus a place-name slot that is empty
   on the parent pages and carries Nan or Koah Ker on a camp page. Both halves
   are cut from the master artwork, so the place name keeps its own face. */
.bar__brand { display: flex; align-items: flex-end; gap: 10px; text-decoration: none; color: inherit; padding-block: 4px; }
/* Each piece of the lockup is one alpha mask painted by CSS, so the flower
   and the place name can take the camp's colour while the signature and
   EXPLORER follow the chrome. --mark-ink is the second slot: the mark colour,
   lifted to the camp's light partner whenever the chrome is on a dark ground,
   because flat indigo or Khmer red will not hold against dark photography. */
.mk { display: block; background: currentColor; }
.bar__mark { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; }
.mk-flower { width: clamp(24px, 2.1vw, 28px); aspect-ratio: 299/300; background: var(--mark-ink); -webkit-mask: url(../brand/mask-flower.png) center/contain no-repeat; mask: url(../brand/mask-flower.png) center/contain no-repeat; }
.mk-visama { width: clamp(78px, 8vw, 100px); aspect-ratio: 1182/300; -webkit-mask: url(../brand/mask-visama.png) center/contain no-repeat; mask: url(../brand/mask-visama.png) center/contain no-repeat; }
.bar__slot { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; flex: none; padding: 0 0 6px 12px; position: relative; }
.bar__slot::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 4px; width: 1px; background: currentColor; opacity: .3; }
.mk-explorer { width: clamp(42px, 4.4vw, 54px); aspect-ratio: 460/90; -webkit-mask: url(../brand/mask-explorer.png) left center/contain no-repeat; mask: url(../brand/mask-explorer.png) left center/contain no-repeat; }
.mk-place { background: var(--mark-ink); }
.mk-place--nan { width: clamp(17px, 1.8vw, 22px); aspect-ratio: 203/130; -webkit-mask: url(../brand/mask-place-nan.png) left center/contain no-repeat; mask: url(../brand/mask-place-nan.png) left center/contain no-repeat; }
.mk-place--kk  { width: clamp(43px, 4.5vw, 55px); aspect-ratio: 502/130; -webkit-mask: url(../brand/mask-place-kk.png) left center/contain no-repeat; mask: url(../brand/mask-place-kk.png) left center/contain no-repeat; }

/* the house switch: the umbrella made literal */
.switch {
  display: flex; align-items: stretch; border: 1px solid color-mix(in oklab, currentColor 32%, transparent);
  border-radius: 999px; overflow: hidden; font-size: .86rem; letter-spacing: 0;
}
.switch a {
  display: flex; align-items: center; padding: 9px clamp(12px, 1.6vw, 20px); text-decoration: none;
  color: inherit; white-space: nowrap; transition: background-color 260ms, color 260ms;
  font-weight: 500;
}
.switch a + a { border-left: 1px solid color-mix(in oklab, currentColor 26%, transparent); }
.switch a:hover { background: color-mix(in oklab, currentColor 14%, transparent); }
.switch a[aria-current="page"] { background: var(--house); color: #F3F4F1; }
html[data-house="kk"] .switch a[aria-current="page"] { background: var(--kk); }
.switch em { font-style: normal; opacity: .62; margin-right: .45em; }
/* "Visama" is the way back to the collection from a camp page: the first
   segment, set in the collection's own face so it reads as the parent. */
.switch a.switch__home { font-family: var(--sc-font-display); font-weight: 400; font-size: .92rem; letter-spacing: .01em; }
.switch a.switch__home[aria-current="page"] { background: var(--explorer-olive); }

.bar__right { display: flex; align-items: center; justify-content: flex-end; gap: clamp(8px, 1.4vw, 18px); }
.bar__right .btn { --b-bg: transparent; --b-ink: currentColor; border-color: color-mix(in oklab, currentColor 34%, transparent); min-height: 40px; font-size: .88rem; }
.bar__right .btn:hover { background: color-mix(in oklab, currentColor 14%, transparent); color: currentColor; }
.bar__menu {
  display: inline-flex; align-items: center; gap: 9px; background: none; border: 0; color: inherit;
  cursor: pointer; font: 500 .9rem/1 var(--sc-font-text); letter-spacing: 0;
  padding: 10px 2px;
}
.bar__menu i { display: block; width: 20px; height: 8px; border-top: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transition: transform 300ms; }
.bar__menu i { position: relative; }
html.menu-open .bar__menu i { border-color: transparent; }
html.menu-open .bar__menu i::before, html.menu-open .bar__menu i::after { content: ""; position: absolute; left: 1px; right: 1px; top: 50%; height: 1.4px; margin-top: -.7px; background: currentColor; rotate: 45deg; }
html.menu-open .bar__menu i::after { rotate: -45deg; }
@media (max-width: 860px) {
  .bar { grid-template-columns: 1fr auto; }
  .switch { display: none; }
  .bar__right .btn { display: none; }
}

/* ================================================================= the menu
   Two camps first, each on its own photograph with its approved lockup on a
   calm ground; the collection links and a way to talk to a person beside
   them. The overlay is the collection's canopy, so neither dye leads.     */
.menu {
  position: fixed; inset: 0; z-index: 68; background: var(--canopy); color: #F3F4F1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) clamp(260px, 24vw, 340px);
  gap: clamp(10px, 1.2vw, 16px);
  padding: calc(var(--bar-h) + 14px) clamp(14px, 3vw, 34px) clamp(14px, 3vw, 34px);
  opacity: 0; visibility: hidden; transition: opacity 440ms var(--sc-ease-out), visibility 440ms;
  overflow-y: auto; overscroll-behavior: contain;
}
html.menu-open .menu { opacity: 1; visibility: visible; }
html.menu-open { overflow: hidden; }
.menu__camps { display: contents; }
.mcamp {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 0; overflow: hidden; border-radius: var(--radius); text-decoration: none; color: #F3F4F1;
  background: #1F2215;
}
.mcamp__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--sc-ease-out); }
.mcamp:hover .mcamp__ph { transform: scale(1.035); }
/* the calm ground: the lower part of the card settles to near-solid canopy,
   so the lockup never sits on busy leaves or timber */
.mcamp::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(24 27 16 / .96) 0, rgb(24 27 16 / .9) 30%, rgb(24 27 16 / .35) 62%, rgb(24 27 16 / 0) 80%); }
.mcamp__ground { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: clamp(22px, 3.2vw, 44px) 20px; text-align: center; }
.mcamp__lock { height: clamp(84px, 13vh, 132px); width: auto; }
.mcamp__line { font-size: .92rem; color: #D6D9C8; }
.mcamp[aria-current="page"] .mcamp__line::after { content: " You are here."; color: #F3F4F1; }
.menu__side { display: flex; flex-direction: column; gap: clamp(18px, 3vh, 30px); padding: clamp(18px, 2.4vw, 30px); background: #2B2F1C; border-radius: var(--radius); }
.menu__mark { width: 96px; height: auto; }
.menu__links { display: flex; flex-direction: column; gap: 4px; }
.menu__links a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 0;
  color: #F3F4F1; text-decoration: none; font-family: var(--sc-font-display); font-size: clamp(1.5rem, 1.2rem + .8vw, 1.95rem); line-height: 1.15;
}
.menu__links a[aria-current="page"] { color: var(--olive-light); }
.menu__links a:hover { color: #FFF; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.menu__talk { margin-top: auto; display: flex; flex-direction: column; gap: 8px; font-size: .9rem; }
.menu__talk a { color: #D6D9C8; text-decoration: none; overflow-wrap: anywhere; }
.menu__talk a:hover { color: #FFF; }
@media (max-width: 860px) {
  .menu { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; align-content: start; }
  .mcamp { min-height: 34vh; min-height: 34svh; }
  .mcamp__ground { padding: 18px 10px; gap: 10px; }
  .mcamp__lock { height: 88px; }
  .mcamp__line { font-size: .76rem; }
  .menu__side { grid-column: 1 / -1; }
  .menu__mark { display: none; }
}

/* ============================================================= 1 · the hero
   Two valleys meeting at the seam.                                        */
.hero .sc-stage { background: #1A1D12; }
.hero__half { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.hero__half img { width: 100%; height: 100%; object-fit: cover; }
.hero__half--l { left: 0; right: auto; width: var(--seam); }
.hero__half--r { left: var(--seam); right: 0; width: auto; }
.hero__half--l img { transform: translate3d(calc(var(--sc-p,0) * -2.2vw), 0, 0) scale(1.08); }
.hero__half--r img { transform: translate3d(calc(var(--sc-p,0) * 2.2vw), 0, 0) scale(1.08); }
.hero__half::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(20 23 13 / .5), rgb(20 23 13 / .12) 40%, rgb(20 23 13 / .72)); }
/* The collection mark sits on the seam; the shared verb runs under it, and
   the two endings split left and right of the line so each camp finishes the
   sentence on its own side. */
/* The block is set as one justified column: "Stillness." and "the
   Forgotten." hang from the seam with identical gutters, both at the same
   size, and that size is chosen so the pair spans exactly the width of
   "Rediscover" above. The mark and the verb then centre on that block. All
   three sizes come from one variable, so the geometry holds at every width.
   Measured in Playfair: "Rediscover" 4.7531em, "Stillness." italic 3.5991em,
   "the Forgotten." italic 5.6023em.
     --r  = (4.7531 - 2 * --g) / (3.5991 + 5.6023)
     --shift = ((5.6023 - 3.5991) * --r) / 2, in verb ems              */
.hero__mark {
  --v: clamp(2.8rem, .6rem + 6.4vw, 6.4rem);
  --g: .16; --r: .4818; --shift: .4826;
  position: absolute; left: 0; right: 0; top: 44%; translate: 0 -50%; z-index: 6; text-align: center;
  padding-inline: clamp(18px, 4vw, 54px); isolation: isolate;
}
/* a calm ground under the mark and the words, so the flower never sits on
   raw photograph */
.hero__mark::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(96vw, 64rem); height: 170%;
  translate: calc(-50% + var(--shift) * var(--v)) -50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(16 18 11 / .66), rgb(16 18 11 / .42) 52%, rgb(16 18 11 / 0));
}
.hero__mark img { width: min(30vw, 210px); height: auto; margin-inline: auto; translate: calc(var(--shift) * var(--v)) 0; }
.hero__verb {
  font-size: var(--v); line-height: .98; translate: calc(var(--shift) * var(--v)) 0;
  margin-top: clamp(14px, 2.6vh, 34px); color: #F3F4F1;
}
.hero__ends { display: grid; grid-template-columns: var(--seam) 1fr; align-items: start; margin-top: clamp(4px, .8vh, 12px); }
.hero__ends span { font-size: calc(var(--v) * var(--r)); line-height: 1.04; }
.hero__ends .nan { text-align: right; padding-right: calc(var(--v) * var(--g)); color: var(--nan-cyano); }
.hero__ends .kk  { text-align: left;  padding-left:  calc(var(--v) * var(--g)); color: var(--kk-gilt); }
.hero__copy {
  position: absolute; left: 0; right: 0; bottom: clamp(30px, 8vh, 86px); z-index: 6;
  padding-inline: clamp(18px, 4vw, 54px); color: #F3F4F1;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 26px; flex-wrap: wrap;
}
.hero__copy p { margin: 0; max-width: 32ch; font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); line-height: 1.5; }
.hero__copy .btn { --b-bg: var(--linen); --b-ink: #333822; }
/* On a phone the seam turns through ninety degrees: Nan above, Koah Ker
   below, the mark and the shared verb sitting on the join. The diptych is the
   whole idea of the page, so it survives the narrow viewport rather than
   collapsing to one photograph. */
@media (max-width: 860px) {
  .hero__half { left: 0; right: 0; width: auto; }
  .hero__half--l { top: 0; bottom: 50%; }
  .hero__half--r { top: 50%; bottom: 0; }
  .hero__half--l img { transform: translate3d(0, calc(var(--sc-p,0) * -2vh), 0) scale(1.1); }
  .hero__half--r img { transform: translate3d(0, calc(var(--sc-p,0) * 2vh), 0) scale(1.1); }
  .hero__half::after { background: linear-gradient(180deg, rgb(16 18 11 / .58), rgb(16 18 11 / .2) 48%, rgb(16 18 11 / .7)); }
  .hero__mark { top: 50%; }
  .hero__copy { flex-direction: column; align-items: flex-start; bottom: clamp(20px, 5vh, 48px); }
  .hero__copy p { font-size: 1rem; }
  /* no vertical seam on a phone, so the justified block centres on the page:
     the mark and verb stay put and the split point moves left instead */
  .hero__mark img, .hero__verb, .hero__mark::before { translate: none; }
  .hero__mark::before { translate: -50% -50%; }
  .hero__ends { grid-template-columns: calc(50% - var(--shift) * var(--v)) 1fr; }
}

/* ============================================================ 2 · the ledger
   The two camps side by side in three plain rows. A flow section, so nothing
   can be cut off by a pinned stage, and short enough to read at a glance.  */
.ledger { padding-block: clamp(84px, 12vw, 150px); }
.ledger__in { position: relative; z-index: 1; width: 100%; max-width: 64rem; margin-inline: auto; padding-inline: clamp(18px, 4vw, 54px); }
.ledger__top { max-width: 40rem; margin-bottom: clamp(34px, 5vw, 60px); }
.ledger__top h2 { margin: 14px 0 0; }
.ledger__head, .ledger__row { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 8vw, 120px); }
.ledger__head { padding-bottom: clamp(18px, 2.4vw, 28px); }
.ledger__hn { font-family: var(--sc-font-display); font-size: clamp(1.25rem, .9rem + 1.2vw, 1.9rem); line-height: 1.08; }
.ledger__hn i { display: block; font-style: normal; font-family: var(--sc-font-text); font-size: .95rem; margin-top: 8px; }
.ledger__hn--nan i { color: var(--nan-cyano); }
.ledger__hn--kk  i { color: var(--kk-gilt); }
.ledger__row { padding-block: clamp(16px, 2vw, 22px); border-bottom: 1px solid rgb(243 244 241 / .12); }
.ledger__row > b { grid-column: 1 / -1; font-weight: 400; font-size: .92rem; color: #A4AA8E; margin-bottom: 6px; }
.ledger__row > span { font-size: clamp(1rem, .92rem + .3vw, 1.18rem); line-height: 1.45; color: #EDEEE6; }
.ledger__foot { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 8vw, 120px); padding-top: clamp(24px, 3vw, 36px); }
.ledger__foot .btn { justify-self: start; --b-bg: transparent; --b-ink: #F3F4F1; border-color: rgb(243 244 241 / .34); }
.ledger__foot .btn:hover { color: #333822; }
.ledger__foot .btn--nan:hover { background: var(--nan-gold-hi); border-color: var(--nan-gold-hi); }
.ledger__foot .btn--kk:hover { background: var(--kk-gilt); border-color: var(--kk-gilt); }
@media (max-width: 620px) {
  .ledger__head, .ledger__row, .ledger__foot { column-gap: 22px; }
  .ledger__hn { font-size: 1.1rem; }
  .ledger__row > span { font-size: .95rem; }
  .ledger__foot .btn { padding-inline: 1em; font-size: .72rem; }
}

/* ============================================================ 3 · editorial */
.ed { padding-block: clamp(80px, 12vw, 170px); }
.ed__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.ed__text { grid-column: 1 / span 5; }
.ed__text h2 { margin: 18px 0 26px; }
.ed__pics { grid-column: 7 / -1; position: relative; }
.ph { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--sc-surface); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ed__big { aspect-ratio: 4/5; }
.ed__small { position: absolute; width: 46%; aspect-ratio: 1/1; left: -9%; bottom: -12%; border: 9px solid var(--sc-canvas); box-shadow: 0 26px 56px -30px hsl(var(--sc-shadow-color) / .5); }
.cap { font-size: .85rem; color: var(--sc-ink-soft); margin-top: 12px; }
/* the caption under a pair of pictures clears the inset photo */
.ed__pics > .cap { margin-top: calc(12% + 18px); padding-left: 40%; }
@media (max-width: 900px) {
  .ed__text, .ed__pics { grid-column: 1 / -1; }
  .ed__pics { margin-top: 44px; }
  .ed__small { left: auto; right: -2%; bottom: -12%; width: 44%; }
  .ed__pics > .cap { padding-left: 0; padding-right: 46%; }
}


/* ================================================================= 4 · rail */
.rail { display: flex; align-items: stretch; gap: clamp(16px, 2.2vw, 34px); height: 100%; padding: calc(var(--bar-h) + 7vh) clamp(18px, 4vw, 54px) 9vh; }
.rail__lead { flex: 0 0 min(76vw, 30rem); display: flex; flex-direction: column; justify-content: center; }
.rail__lead h2 { margin: 16px 0 22px; }
.card {
  flex: 0 0 min(72vw, 21rem); position: relative; display: flex; flex-direction: column;
  text-decoration: none; color: inherit; background: var(--sc-surface); border-radius: var(--radius); overflow: hidden;
  transition: transform 420ms var(--sc-ease-out);
}
.card__ph { aspect-ratio: 4/5; overflow: hidden; }
.card__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--sc-ease-out); }
.card:hover img { transform: scale(1.045); }
.card__body { padding: 18px 20px 24px; }
/* The rail is a collection surface: the camps are named in plain words. */
.card__at { margin: 14px 0 0; font-size: .9rem; color: var(--sc-ink); }
.card h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: 1.42rem; line-height: 1.12; margin: 4px 0 10px; }
.card p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--sc-ink-soft); }

/* ================================================================== 5 · 4Cs */
.cs { padding-block: clamp(80px, 12vw, 165px); }
.cs__grid, .pairs { display: grid; gap: clamp(30px, 4vw, 52px); margin-top: clamp(44px, 6vw, 80px); max-width: 64rem; }
.cs__item, .pairs > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 12px clamp(24px, 4vw, 64px); align-items: baseline; }
.cs__item h3, .pairs h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); line-height: 1.1; margin: 0; }
@media (max-width: 700px) { .cs__item, .pairs > div { grid-template-columns: 1fr; } }
.cs__item p, .pairs p { margin: 0; font-size: 1.02rem; line-height: 1.65; color: var(--sc-ink-soft); max-width: 46ch; }

/* =========================================================== 6 · both fires */
.fires .sc-stage { background: #1A1D12; }
.fires__half { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.fires__half img { width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.fires__half--l { left: 0; width: calc(var(--seam) - var(--gap, 0px)); }
.fires__half--r { right: 0; width: calc(100% - var(--seam) - var(--gap, 0px)); }
.fires__half::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(20 23 13 / .5), rgb(20 23 13 / .1) 45%, rgb(20 23 13 / .8)); }
.fires__foot { position: absolute; left: 0; right: 0; bottom: clamp(26px, 6vh, 64px); z-index: 4; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 6vw, 90px); padding-inline: clamp(18px, 4vw, 54px); color: #F3F4F1; }
.fires__foot h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.2rem, .95rem + 1vw, 1.9rem); margin: 0 0 10px; }
.fires__foot p { margin: 0; font-size: .92rem; line-height: 1.6; color: #CDD1BD; max-width: 34ch; }
.fires__foot .kk { text-align: right; }
.fires__foot .kk p { margin-left: auto; }
.fires__copy::before { content: ""; position: absolute; inset: -70% -60%; z-index: -1;
  background: radial-gradient(38% 34% at 50% 50%, rgb(16 18 11 / .8), rgb(16 18 11 / .42) 52%, rgb(16 18 11 / 0) 78%); }
.fires__copy { isolation: isolate; position: absolute; left: 50%; top: 34%; translate: -50% -50%; z-index: 5; width: min(90vw, 44rem); text-align: center; color: #F3F4F1; }
.fires__copy p { margin: 22px auto 0; max-width: 40ch; font-size: clamp(1rem, .94rem + .3vw, 1.22rem); line-height: 1.6; color: #DDE1CE; }
@media (max-width: 860px) {
  .fires__half--l { width: 100%; } .fires__half--r { display: none; }
  .fires__foot { grid-template-columns: 1fr; gap: 20px; }
  .fires__foot .kk { text-align: left; } .fires__foot .kk p { margin-left: 0; }
}

/* ============================================================ 7 · two doors */
.doors .sc-stage { display: flex; background: #1A1D12; }
.door {
  position: relative; flex: 1 1 50%; overflow: hidden; text-decoration: none; color: #F3F4F1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(24px, 4vw, 60px); transition: flex-grow 700ms var(--sc-ease-out);
}
.door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .52; transition: opacity 700ms, transform 1200ms var(--sc-ease-out); }
.door::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(16 18 11 / .96) 0, rgb(16 18 11 / .93) 52%, rgb(16 18 11 / .62) 70%, rgb(16 18 11 / .12) 94%); }
.door > * { position: relative; z-index: 2; }
.door img.door__lock { position: relative; inset: auto; align-self: flex-start; z-index: 3; height: clamp(74px, 11vh, 116px); width: auto; opacity: 1; margin: 0 0 24px; object-fit: contain; }

.door > img.door__lock { flex: none; }
.door h3 { text-shadow: 0 2px 20px rgb(16 18 11 / .6); font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem); margin: 0 0 12px; line-height: 1.05; }
.door p { text-shadow: 0 1px 14px rgb(16 18 11 / .7); margin: 0 0 20px; font-size: .95rem; line-height: 1.6; color: #CDD1BD; max-width: 32ch; }
.door .open { display: block; font-size: .95rem; margin: -8px 0 18px; text-shadow: 0 1px 12px rgb(16 18 11 / .9); }
.door--nan .open { color: var(--nan-cyano); }
.door--kk .open { color: var(--kk-gilt); }
.door .btn { align-self: flex-start; --b-bg: transparent; --b-ink: #F3F4F1; border-color: rgb(243 244 241 / .55); }
.door--nan:hover .btn { background: var(--nan-gold-hi); border-color: var(--nan-gold-hi); color: #0F2440; }
.door--kk:hover .btn { background: var(--kk-gilt); border-color: var(--kk-gilt); color: #3D1216; }
@media (hover: hover) and (min-width: 861px) {
  .door:hover { flex-grow: 1.42; }
  .door:hover img { opacity: .76; transform: scale(1.03); }
}
@media (max-width: 860px) {
  .doors .sc-stage { flex-direction: column; }
  /* half a phone screen is too short to lay the lockup over the picture, so
     the picture becomes a band at the top and the words sit on solid canopy */
  .door { padding: 16px 18px 18px; }
  .door img:not(.door__lock) { height: 42%; opacity: .9; }
  .door::after { background: linear-gradient(180deg, rgb(16 18 11 / 0) 0, rgb(16 18 11 / .2) 30%, #10120B 42%); }
  .door img.door__lock { height: 88px; margin-bottom: 12px; }
  .door .open { margin-bottom: 8px; }
  .door h3 { font-size: 1.35rem; margin-bottom: 12px; }
  .door p { display: none; }
  .door .btn { min-height: 40px; }
}

/* ================================================================== footer
   The collection signs off: the Visama mark, then each camp under its own
   approved lockup with the address and the way to reach it, and the VHG
   endorsement at the foot, smaller than the mark and never beside it
   (brand book p.12). The seam never enters the footer.                   */
.foot { position: relative; z-index: 66; background: var(--canopy); color: #BEC2AC; padding: clamp(56px, 7vw, 92px) 0 30px; }
.foot a { color: #E3E5D9; text-decoration: none; }
.foot a:hover { color: #FFF; }
.foot__top { display: flex; align-items: center; gap: clamp(20px, 4vw, 56px); flex-wrap: wrap; padding-bottom: clamp(20px, 3vw, 36px); }
.foot__mark img { width: clamp(118px, 11vw, 150px); height: auto; }
.foot__say { margin: 0; flex: 1 1 16rem; font-family: var(--sc-font-display); font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); line-height: 1.12; color: #F3F4F1; }
.foot__say em { font-style: italic; }
.foot .foot__cta { --b-bg: var(--linen); --b-ink: #333822; color: #333822; }
.foot .foot__cta:hover { color: #333822; }
.foot__grid { display: grid; grid-template-columns: 1fr 1fr minmax(180px, .8fr); gap: clamp(30px, 4vw, 64px); padding-block: clamp(34px, 4vw, 54px); }
.foot__lock { display: inline-block; margin-bottom: 20px; }
.foot__lock img { height: clamp(92px, 8vw, 112px); width: auto; }
.foot__camp p { margin: 0 0 12px; font-size: .92rem; line-height: 1.65; }
.foot__more { display: flex; flex-direction: column; gap: 10px; font-size: .92rem; padding-top: 6px; }
.foot__more a { overflow-wrap: anywhere; }
.foot__end { display: flex; justify-content: space-between; align-items: center; gap: 12px 28px; flex-wrap: wrap; padding-top: clamp(30px, 4vw, 48px); font-size: .8rem; color: #9DA289; }
.foot__vhg { display: inline-flex; align-items: center; gap: 12px; }
.foot__vhg img { width: 30px; height: 30px; opacity: .85; }
@media (max-width: 760px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__more { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 10px 22px; }
}
@media (max-width: 460px) {
  .foot__lock img { height: 88px; }
  .foot__camp p { font-size: .84rem; }
}

/* ======================================================== property page bits */
.phero .sc-stage { background: #1A1D12; }
.phero__bg { position: absolute; inset: -6% 0 -6% 0; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06) translate3d(0, calc(var(--sc-p,0) * 6vh), 0); }
/* The scrim lives inside the stage. It used to be doubled as .phero::after
   on the section itself, which sits ABOVE the sticky stage and greyed the
   lockup and the headline to about 55%: the "hard to see" lockup. */
.phero__scrim { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(20 23 13 / .56), rgb(20 23 13 / .12) 40%, rgb(20 23 13 / .82)); z-index: 1; }
.phero__in { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; text-align: center; padding: var(--bar-h) clamp(18px, 4vw, 54px) 0; color: #F3F4F1; }
.phero__lock { height: clamp(88px, 14vh, 156px); width: auto; margin: 0 auto 26px; }
/* the calm ground under a lockup on photography: a soft pool of canopy that
   the flower and the place name can hold against (brand book p.18, "don't
   place on busy imagery") */
.phero__in > div { position: relative; isolation: isolate; }
.phero__in > div::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 46%; width: min(118vw, 62rem); height: 150%;
  translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(14 16 10 / .72), rgb(14 16 10 / .5) 50%, rgb(14 16 10 / 0));
}
.phero--flat .phero__in > div::before { display: none; }
/* the way back to the collection, on every camp page */
.crumb {
  position: absolute; z-index: 5; left: clamp(18px, 4vw, 54px); top: calc(var(--bar-h) + 18px);
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: .9rem; color: #E3E5D9;
}
.crumb a { display: inline-flex; align-items: center; gap: 8px; color: #F3F4F1; text-decoration: none; padding: 8px 14px 8px 11px; border: 1px solid rgb(243 244 241 / .4); border-radius: 999px; background: rgb(20 23 13 / .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color 200ms; }
.crumb a::before { content: "\2190"; }
.crumb a:hover { background: rgb(20 23 13 / .6); }
@media (max-width: 860px) { .crumb { top: calc(var(--bar-h) + 10px); left: 14px; } }
.phero__in h1 { color: #F3F4F1; }
.phero__in .lede { margin: 26px auto 0; max-width: 40ch; color: #E3E5D9; }


.tentcard { flex: 0 0 min(68vw, 17.5rem); display: flex; flex-direction: column; background: var(--sc-surface); border-radius: var(--radius); overflow: hidden; }
.tentcard__ph { aspect-ratio: 3/4; overflow: hidden; }
.tentcard__ph img { width: 100%; height: 100%; object-fit: cover; }
.tentcard__b { padding: 16px 18px 22px; }
.tentcard__b h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: 1.3rem; margin: 2px 0 4px; }
.tentcard__b .th { font-size: .88rem; color: var(--sc-ink-soft); margin: 0 0 9px; }
.tentcard__b p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--sc-ink-soft); }

.slab { padding-block: clamp(76px, 11vw, 160px); }
.slab__head { max-width: 46rem; }
.slab__head h2 { margin: 16px 0 22px; }

.exp { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; }
.exp + .exp { margin-top: clamp(56px, 9vw, 130px); }
.exp__ph { grid-column: 1 / span 7; aspect-ratio: 16/10; }
.exp__tx { grid-column: 9 / -1; }
.exp:nth-child(even) .exp__ph { grid-column: 6 / -1; order: 2; }
.exp:nth-child(even) .exp__tx { grid-column: 1 / span 4; order: 1; }
.exp__tx h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); margin: 12px 0 16px; line-height: 1.08; }
.exp__tx p { margin: 0; font-size: .97rem; line-height: 1.65; color: var(--sc-ink-soft); }
@media (max-width: 860px) {
  .exp__ph, .exp__tx, .exp:nth-child(even) .exp__ph, .exp:nth-child(even) .exp__tx { grid-column: 1 / -1; order: initial; }
  .exp__tx { margin-top: 20px; }
}

.rows { display: grid; gap: clamp(22px, 3vw, 34px); }
.rows > div { display: grid; grid-template-columns: minmax(120px, 1fr) 3fr; gap: clamp(14px, 3vw, 42px);  }
.rows b { font-weight: 500; font-size: 1rem; color: var(--sc-ink); }
.rows span { font-size: .98rem; line-height: 1.6; }
@media (max-width: 620px) { .rows > div { grid-template-columns: 1fr; gap: 6px; } }

.pclose { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding-block: calc(var(--bar-h) + 40px) 60px; overflow: hidden; }
.pclose .sc-stage { display: grid; place-items: center; text-align: center; }
.pclose__lock { height: clamp(96px, 14vh, 140px); width: auto; margin: 0 auto 30px; }
.pclose__in { padding: 0 clamp(18px, 4vw, 54px); max-width: 52rem; }
.pclose__in .lede { margin: 24px auto 32px; }
.pclose__acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ==================================================================== forms */
.field { display: grid; gap: 7px; }
.field > label { font-size: .8rem; letter-spacing: .04em; color: var(--sc-ink-soft); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; padding: 13px 14px; border-radius: 6px; min-height: 48px;
  border: 1px solid color-mix(in oklab, var(--sc-ink) 22%, transparent);
  background: #FFFFFF; color: var(--sc-ink); width: 100%;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--explorer-olive); outline-offset: 1px; border-color: transparent; }
.field textarea { min-height: 96px; resize: vertical; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .pair { grid-template-columns: 1fr; } }

/* ============================================================= plan a stay
   Five folding steps and a summary that carries the one next action.     */
.book { padding: calc(var(--bar-h) + clamp(28px, 5vw, 64px)) 0 clamp(70px, 9vw, 120px); }
.book__head { margin-bottom: clamp(24px, 3.4vw, 44px); }
.book__head h1 { margin-top: 12px; }
.book__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 25rem); gap: clamp(24px, 4vw, 64px); align-items: start; }
.book__steps { display: flex; flex-direction: column; gap: 12px; }
.bstep { margin: 0; padding: 0; border: 0; min-width: 0; background: #FFFFFF; border-radius: 10px; box-shadow: 0 0 0 1px rgb(28 33 25 / .08); transition: box-shadow 300ms, opacity 300ms; }
.bstep[hidden] { display: none; }
.bstep__h { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px clamp(16px, 2.4vw, 26px); float: left; box-sizing: border-box; }
.bstep__h + * { clear: both; }
.bstep__n { display: none; }
.bstep__q { font-family: var(--sc-font-display); font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); line-height: 1.2; }
.bstep__v { margin-left: auto; font-size: .92rem; color: var(--ink-soft); text-align: right; display: none; }
.bstep__edit { display: none; border: 0; background: none; font: inherit; font-size: .84rem; color: var(--explorer-olive); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 0 6px 4px; }
.bstep__body { display: none; padding: 4px clamp(16px, 2.4vw, 26px) clamp(20px, 2.6vw, 28px); }
.bstep.is-open { box-shadow: 0 0 0 1.5px var(--explorer-olive), 0 18px 40px -26px rgb(28 33 25 / .35); }
.bstep.is-open .bstep__body { display: block; animation: bstepIn 360ms var(--sc-ease-out); }
.bstep.is-done .bstep__v, .bstep.is-done .bstep__edit { display: block; }
.bstep.is-done .bstep__h { cursor: pointer; }
.bstep.is-later { opacity: .5; }
@keyframes bstepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bstep.is-open .bstep__body { animation: none; } }
.bstep__go { margin-top: 20px; }
.btn:disabled, .btn.is-off { opacity: .45; pointer-events: none; }

.bcamps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bcamp { position: relative; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; cursor: pointer; box-shadow: 0 0 0 1px rgb(28 33 25 / .12); transition: box-shadow 200ms; }
.bcamp input, .btent input { position: absolute; opacity: 0; pointer-events: none; }
.bcamp img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.bcamp__t { padding: 14px 16px 16px; }
.bcamp b { display: block; font-family: var(--sc-font-display); font-weight: 400; font-size: 1.15rem; line-height: 1.2; }
.bcamp small { display: block; margin-top: 5px; font-size: .86rem; color: var(--ink-soft); }
.bcamp:hover { box-shadow: 0 0 0 1px rgb(28 33 25 / .3); }
.bcamp:has(input:checked) { box-shadow: 0 0 0 2px var(--explorer-olive); }
.bcamp:has(input:focus-visible), .btent:has(input:focus-visible) { outline: 2px solid var(--explorer-olive); outline-offset: 3px; }

.cal { max-width: 25rem; }
.cal__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal__top b { font-weight: 500; font-size: 1rem; }
.cal__nav { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(28 33 25 / .16); background: none; font-size: 1rem; cursor: pointer; color: inherit; }
.cal__nav:disabled { opacity: .3; cursor: default; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal__dow { text-align: center; font-size: .72rem; color: var(--ink-soft); padding: 6px 0; }
.cal__grid button { aspect-ratio: 1; min-height: 40px; border: 0; border-radius: 50%; background: none; font: inherit; font-size: .95rem; color: inherit; cursor: pointer; font-variant-numeric: tabular-nums; }
.cal__grid button:hover:not(:disabled) { background: var(--sage); }
.cal__grid button:disabled { color: rgb(28 33 25 / .25); cursor: default; }
.cal__grid button.is-stay { background: color-mix(in oklab, var(--explorer-olive) 16%, #FFF); border-radius: 6px; }
.cal__grid button.is-in, .cal__grid button.is-out { background: var(--explorer-olive); color: #FFF; }
.count { display: flex; align-items: center; gap: 14px; padding: 8px 0; max-width: 25rem; }
.count__l { flex: 1; font-size: 1rem; }
.count__b { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(28 33 25 / .2); background: #FFF; font-size: 1.2rem; line-height: 1; cursor: pointer; color: inherit; }
.count__b:hover { border-color: var(--ink); }
.count output { min-width: 2ch; text-align: center; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.cal + .count { margin-top: 14px; }

.btents { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.btent { position: relative; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; cursor: pointer; box-shadow: 0 0 0 1px rgb(28 33 25 / .12); }
.btent img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.btent span { padding: 10px 12px 12px; }
.btent b { display: block; font-weight: 500; font-size: .95rem; }
.btent small { display: block; margin-top: 3px; font-size: .8rem; line-height: 1.35; color: var(--ink-soft); }
.btent:has(input:checked) { box-shadow: 0 0 0 2px var(--explorer-olive); }

.bsum { position: sticky; top: calc(var(--bar-h) + 20px); }
.bsum__card { background: #FFFFFF; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgb(28 33 25 / .08), 0 30px 60px -40px rgb(28 33 25 / .45); }
.bsum__ph { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--sage); }
.bsum__in { padding: 20px 22px 22px; }
.bsum__camp { margin: 0 0 12px; font-family: var(--sc-font-display); font-size: 1.3rem; line-height: 1.2; }
.bsum__rows { margin: 0 0 20px; }
.bsum__rows div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid rgb(28 33 25 / .08); font-size: .92rem; }
.bsum__rows dt { color: var(--ink-soft); }
.bsum__rows dd { margin: 0; text-align: right; }
.bsum__go { width: 100%; justify-content: center; min-height: 52px; }
.bsum__alt { margin: 12px 0 0; text-align: center; font-size: .88rem; }
.bsum__alt a { color: var(--ink); }
.bsum__note { margin: 14px 0 0; font-size: .8rem; line-height: 1.5; color: var(--ink-soft); }
.bbar { display: none; }
@media (max-width: 860px) {
  .book__grid { grid-template-columns: 1fr; }
  .bsum { position: static; }
  .bsum__ph { display: none; }
  .bcamps { grid-template-columns: 1fr; }
  .bcamp { flex-direction: row; align-items: stretch; }
  .bcamp img { width: 38%; aspect-ratio: auto; min-height: 96px; }
  .bcamp__t { display: flex; flex-direction: column; justify-content: center; }
  .btents { grid-template-columns: 1fr 1fr; }
  .bstep__v { font-size: .84rem; }
  /* the next step under the thumb */
  .bbar {
    display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgb(250 250 247 / .96); z-index: 67;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 -1px 0 rgb(28 33 25 / .1);
  }
  .bbar__s { flex: 1; min-width: 0; font-size: .86rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bbar__go { min-height: 48px; }
  .bbar { transition: transform 300ms var(--sc-ease-out); }
  .bbar.is-away { transform: translateY(110%); }
  /* on a phone the bar is the only Continue, always under the thumb */
  .bstep__go { display: none; }
  .book { padding-bottom: 100px; }
}

/* ============================================================== talk to us */
.ask { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 60px; flex-wrap: wrap; }
.ask__links { display: flex; flex-wrap: wrap; gap: 10px; }
.ask__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgb(28 33 25 / .2); color: var(--ink); text-decoration: none; font-size: .9rem; }
.ask__links a:hover { border-color: var(--ink); }

/* ============================================================= page curtain */
.curtain {
  position: fixed; inset: 0; z-index: 90; background: var(--canopy); display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity 420ms var(--sc-ease-out), visibility 420ms;
}
.curtain img { width: 150px; height: auto; opacity: .9; }
html.is-leaving .curtain { opacity: 1; visibility: visible; }
html.is-arriving .curtain { opacity: 1; visibility: visible; transition: none; }
html.is-arrived .curtain { opacity: 0; visibility: hidden; }

/* ------------------------------------------------------------------- misc */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -70px; z-index: 200; background: var(--visama-green); color: #fff; padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--linen); outline-offset: 3px; }
[data-sc-in] { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--sc-ease-out), transform 700ms var(--sc-ease-out); }
[data-sc-in].sc-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-sc-in] { opacity: 1; transform: none; } }

/* ==========================================================================
   CAMP VISUAL LANGUAGE
   Each book gives its camp a signature artwork and a rule for using it:

     Nan       cyanotype botanicals, always pale on indigo, one plant at a
               time, placed off-centre with at least a third of the frame
               empty, paired with one Tai Lue motif band on the opposite edge.
     Koah Ker  gilt botanicals, always gilt on Koah Ker Red or Lacquer linen,
               one plant at a time, same off-centre rule, with a Kbach-style
               damask kept faint behind.
   ========================================================================== */
.print { position: relative; overflow: hidden; padding-block: clamp(70px, 10vw, 140px); }
.print__in { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; }
.print__art { justify-self: center; }
.print__q { font-family: var(--sc-font-display); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem); line-height: 1.16; margin: 0; }
.print__q em { font-style: italic; }
.print__c { margin: 20px 0 0; font-size: .95rem; line-height: 1.65; color: var(--sc-ink-soft); max-width: 40ch; }
@media (max-width: 760px) { .print__in { grid-template-columns: 1fr; } .print__art { order: 2; } }

/* Nan · cyanotype, drawn in Cyanotype Blue by masking the white print */
.print--nan { background: #0F2440 url(../art/nan-cloth.webp) center / cover; }
.cyano { display: block; width: min(38vw, 300px); aspect-ratio: 773 / 1100;
  background: var(--nan-cyano);
  -webkit-mask: var(--print) center / contain no-repeat; mask: var(--print) center / contain no-repeat;
  opacity: .9; }

/* Koah Ker · gilt on red linen, damask kept faint behind */
.print--kk { background: #601D22 url(../art/kk-linen-red.jpg) center / cover; }
.print--kk::before { content: ""; position: absolute; inset: 0; z-index: 1; opacity: .07;
  background: var(--kk-gilt); -webkit-mask: url(../art/kk-damask.png) 0 0 / 180px 248px repeat; mask: url(../art/kk-damask.png) 0 0 / 180px 248px repeat; }
.gilt { display: block; width: min(38vw, 300px); height: auto; }

/* =========================================================== a pinned still
   One full-bleed photograph, one thought. Used for the evening act on each
   camp page. */
.still .sc-stage { background: #1A1D12; }
.still__bg { position: absolute; inset: -6% 0; }
.still__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06) translate3d(0, calc(var(--sc-p,0) * 7vh), 0); }
.still__scrim { position: absolute; inset: 0;
  background:
    radial-gradient(76% 48% at 50% 40%, rgb(16 18 11 / .74), rgb(16 18 11 / 0) 72%),
    linear-gradient(180deg, rgb(16 18 11 / .52), rgb(16 18 11 / .18) 44%, rgb(16 18 11 / .9)); }
.still__in { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--bar-h) clamp(18px, 4vw, 54px) 0; }
.still__in > div { max-width: 44rem; color: #F3F4F1; margin-bottom: clamp(60px, 14vh, 150px); }
.still__in p.lede { margin: 24px auto 0; max-width: 42ch; color: #E3E5D9; }

/* ---------------------------------------------------------------- pull quote */
.pull { padding-block: clamp(60px, 8vw, 110px); text-align: center; }
.pull p { font-family: var(--sc-font-display); font-size: clamp(1.5rem, 1.1rem + 1.9vw, 3rem); line-height: 1.16; margin: 0 auto; max-width: 22ch; }
.pull p em { font-style: italic; }
.pull .cap { margin-top: 22px; }

/* ------------------------------------------------------------ colour chips */
.chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(14px, 2vw, 26px); margin-top: clamp(30px, 4vw, 48px); }
.chips i { display: block; height: 68px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgb(33 36 26 / .12); }
.chips b { display: block; font-weight: 500; font-size: .92rem; margin-top: 12px; }
.chips span { font-size: .8rem; color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }

/* a shorter pinned hero, for the parent pages that lead with type */
.phero--short .sc-stage { height: 76vh; height: 76svh; }

/* the mark family, shown three up on the how-we-work page */
.marks { display: grid; gap: clamp(18px, 3vw, 34px); }
.marks figure { margin: 0; background: var(--sage); border-radius: var(--radius); padding: clamp(20px, 3vw, 34px); text-align: center; }
.marks img { width: min(74%, 230px); height: auto; margin-inline: auto; }
.marks figcaption { margin-top: 16px; font-size: .95rem; color: var(--sc-ink-soft); }

/* a hero with no photograph: the collection's own ground */
.phero--flat .sc-stage { height: 64vh; height: 64svh; background: var(--sc-canvas); }
.phero--flat .phero__in { color: var(--sc-ink); }
.phero--flat .phero__in .lede { color: var(--sc-ink-soft); }

@media (max-width: 860px) {
  /* A phone stage is 844px tall: the centred statement and the four notes
     below it will collide unless the statement gives ground. */
  .still__in { align-items: start; padding-top: calc(var(--bar-h) + 7vh); }
  .still__in > div { margin-bottom: 0; }
  .still__in h2 { font-size: clamp(1.9rem, 1.1rem + 4.6vw, 2.8rem); }
  .still__in p.lede { font-size: 1rem; line-height: 1.5; }
  .fires__copy { top: 30%; }
  .fires__copy p { font-size: .95rem; }
  .pclose__in h2 { font-size: clamp(1.8rem, 1.1rem + 4vw, 2.6rem); }
}