/* ============================================================
   MUWAN PALASSA — shared components, ported from the approved
   synthesis homepage (concepts/synthesis/index.html).
   The canopy is the ground: deep forest greens carry every page;
   the sunlit ivory/clay/sand sections are the interludes the
   darkness opens into. One journey line, one grain, one mono
   field voice, fireflies riding the dark.

   Page-specific styles go in assets/css/pages/{slug}.css.
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

/* NOTE: html must have NO background — the body ground propagates to the
   canvas, which is what lets section grounds (::before, z:-1) paint above it
   (tokens.md §6 stacking recipe). Do not "fix" this. */
html{ scroll-padding-top: calc(var(--header-h) + 1rem); overflow-x: clip; }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }

body{
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink);
  /* canopy ground: forest floor with heat in the black — never flat, never tech-dark */
  background:
    radial-gradient(140% 50% at 50% 0%, rgba(192,137,78,.05), transparent 60%),
    var(--forest);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* film grain — ONE emulsion over both moods (tokens.md §5); never per-image */
body::after{
  content:"";
  position: fixed; inset: -2%; z-index: 2000;
  pointer-events: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="280" height="280"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="280" height="280" filter="url(%23n)" opacity="0.5"/></svg>');
  background-size: 280px 280px;
  opacity: .06;
  mix-blend-mode: overlay;
}

img{ max-width:100%; height:auto; display:block; }
a{ color: var(--clay-deep); }
h1,h2,h3{ font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
h1{ font-size: var(--fs-900); font-variation-settings: "opsz" 144; }
h2{ font-size: var(--fs-800); font-variation-settings: "opsz" 100; }
h3{ font-size: var(--fs-600); line-height: 1.25; }
p{ max-width: 62ch; }
main ul{ list-style: none; }
em{ font-style: italic; }
:focus-visible{ outline: 2.5px solid var(--bronze); outline-offset: 3px; border-radius: 2px; }
::selection{ background: var(--bronze); color: var(--night); }

.visually-hidden, .screen-reader-text{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.skip-link{
  position:absolute; left:1rem; top:-4rem; z-index:3000;
  background: var(--ink); color: var(--ivory);
  padding:.6rem 1.1rem; border-radius:.5rem; text-decoration:none;
  transition: top .25s var(--ease-out);
}
.skip-link:focus{ top:1rem; }

.container{ width:var(--container); margin-inline:auto; }
.container-wide{ width:var(--container-wide); margin-inline:auto; }

/* ---------- the two voices ----------
   kicker      = the human voice (Karla 700, tracked, hand-ruled tick)
   field-note  = the instrument voice (mono metadata on every photograph) */
.kicker{
  display:inline-flex; align-items:center; gap:.75rem;
  font-size:var(--fs-kicker); font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color: var(--clay-deep);
  margin-bottom: var(--s-3);
}
.kicker::before{
  content:""; width:2.25rem; height:2px; border-radius:2px;
  background: currentColor; opacity:.8;
  transform: rotate(-1.2deg); /* hand-ruled, not machine-ruled */
}
.on-dark .kicker{ color: var(--bronze); }

.field-note{
  font-family: var(--mono);
  font-size: var(--fs-note); font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--umber);
}
.field-note b{ font-weight: 500; color: var(--ink); }
.on-dark .field-note{ color: var(--khaki); }
.on-dark .field-note b{ color: var(--ivory); }

.lede{ font-size: var(--fs-600); line-height: 1.55; color: var(--ink); }
.muted{ color: var(--umber); }
.on-dark{ color: rgba(243,235,219,.88); }
.on-dark h1,.on-dark h2,.on-dark h3{ color: var(--ivory); }
.on-dark .lede{ color: rgba(243,235,219,.94); }
.on-dark .muted{ color: var(--khaki); }
.on-dark a{ color: var(--sand); }

.ph-slot{ /* [PLACEHOLDER] chips — data awaiting the client */
  font-family: var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--umber); border:1px dashed rgba(41,34,22,.3);
  padding:.15em .6em; border-radius:2px; white-space:nowrap;
}
.on-dark .ph-slot{ color:var(--khaki); border-color:rgba(243,235,219,.32); }

/* REC dot — documentary pulse; dark set pieces + transition bands only */
.rec{ display:inline-block; width:.55em; height:.55em; border-radius:50%; background:var(--bronze); margin-right:.5em; }
@media (prefers-reduced-motion: no-preference){
  .rec{ animation: blink 2.4s steps(1) infinite; }
}
@keyframes blink{ 0%,70%{opacity:1} 71%,100%{opacity:.15} }

/* ---------- buttons ----------
   "ink-fill" hover: a darker pigment rises from the baseline inside the pill */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family: var(--sans); font-weight:700; font-size:.95rem; letter-spacing:.04em;
  min-height:3rem; padding:.75rem 1.75rem;
  white-space:nowrap;
  color: var(--ivory);
  background-color: var(--clay-deep);
  background-image: linear-gradient(#6E2810,#6E2810);
  background-repeat: no-repeat;
  background-size: 100% 0%;
  background-position: 0 100%;
  border:1px solid transparent; border-radius:var(--radius-pill);
  text-decoration:none; cursor:pointer;
  box-shadow: 0 1px 0 rgba(41,34,22,.25), inset 0 -2px 0 rgba(41,34,22,.22);
  transition: background-size var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.btn:hover, .btn:focus-visible{ background-size:100% 100%; transform:translateY(-2px); color:var(--ivory); }
.btn:active{ transform:translateY(0) scale(.985); }
/* the single metallic accent: a temple-bronze thread around Book Now ONLY */
.btn-book{ position:relative; }
.btn-book::before{
  content:""; position:absolute; inset:-4px; border-radius:var(--radius-pill);
  padding:1.5px; background: var(--bronze-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.9; pointer-events:none;
}
.btn-ghost{
  background-color:transparent; color:var(--ivory);
  background-image: linear-gradient(rgba(243,235,219,.14), rgba(243,235,219,.14));
  border:1.5px solid rgba(243,235,219,.55); box-shadow:none;
}
.btn-ghost-dark{
  background-color:transparent; color:var(--clay-deep);
  background-image: linear-gradient(rgba(179,85,43,.12), rgba(179,85,43,.12));
  border:1.5px solid rgba(143,61,27,.45); box-shadow:none;
}
.btn-ghost-dark:hover, .btn-ghost-dark:focus-visible{ color:var(--clay-deep); }
.btn-lg{ min-height:3.5rem; padding:1rem 2.6rem; font-size:1.05rem; }

.textlink{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; color:var(--clay-deep); text-decoration:none;
  border-bottom:1.5px solid rgba(143,61,27,.4); padding-bottom:2px;
  transition: border-color var(--dur) var(--ease-out), gap var(--dur) var(--ease-out);
}
.textlink:hover{ border-color:var(--clay-deep); gap:.8rem; }
.textlink svg{ width:1em; height:1em; flex:none; }
.on-dark .textlink{ color:var(--sand); border-color:rgba(231,215,184,.5); }
.on-dark .textlink:hover{ border-color:var(--sand); }

/* ---------- header ----------
   Default register is ivory-on-dark (the page is majority canopy); it flips
   to is-light only while crossing a .zone-light section (main.js). */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--header-h);
  display:flex; align-items:center;
  transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
html:not(.js) .site-header{ background: rgba(18,22,15,.78); } /* no-JS: always-readable scrim */
.site-header.is-scrolled{
  background: rgba(18,22,15,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line-dark);
}
.site-header.is-light.is-scrolled{
  background: rgba(243,235,219,.92);
  box-shadow: 0 1px 0 rgba(41,34,22,.12);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); width:min(84rem, 100% - 2.75rem); margin-inline:auto; }
.brand{ display:flex; align-items:baseline; gap:.7rem; text-decoration:none; color:var(--ivory); }
.brand-name{ font-family:var(--serif); font-size:1.45rem; letter-spacing:-.01em; line-height:1; white-space:nowrap; }
.brand-sub{ font-family:var(--mono); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--khaki); white-space:nowrap; }
.site-header.is-light .brand{ color:var(--ink); }
.site-header.is-light .brand-sub{ color:var(--umber); }
.primary-nav ul{ display:flex; gap:clamp(1rem, 2vw, 1.9rem); list-style:none; margin:0; padding:0; }
.primary-nav a{
  position:relative;
  font-size:.92rem; font-weight:600; color:rgba(243,235,219,.85); text-decoration:none;
  padding:.4rem 0;
  transition: color var(--dur) var(--ease-out);
}
/* nav "ink-draw" underline: sketches itself from the left */
.primary-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: var(--bronze); border-radius:2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur) var(--ease-out);
}
.primary-nav a:hover, .primary-nav a:focus-visible{ color:var(--bronze); }
.primary-nav a:hover::after, .primary-nav a:focus-visible::after{ transform: scaleX(1); }
.primary-nav .current-menu-item > a::after,
.primary-nav .current_page_item > a::after{ transform: scaleX(1); }
.site-header.is-light .primary-nav a{ color:var(--ink); }
.site-header.is-light .primary-nav a:hover, .site-header.is-light .primary-nav a:focus-visible{ color:var(--clay-deep); }
.site-header.is-light .primary-nav a::after{ background:var(--clay); }
.header-cta{ display:flex; align-items:center; gap:1rem; }
.menu-toggle{
  display:none; background:none; border:none; cursor:pointer;
  width:2.9rem; height:2.9rem; border-radius:50%;
  align-items:center; justify-content:center; color:var(--ivory);
}
.site-header.is-light .menu-toggle{ color:var(--ink); }
.menu-toggle svg{ width:1.6rem; height:1.6rem; }
@media (max-width:67.5em){
  .primary-nav{ display:none; }
  .menu-toggle{ display:inline-flex; }
}
@media (max-width:30em){
  .brand-sub{ display:none; }
  .header-cta .btn{ min-height:2.6rem; padding:.5rem 1.15rem; font-size:.85rem; }
}

/* mobile menu overlay (above grain: z 2100) */
.menu-overlay{
  position:fixed; inset:0; z-index:2100;
  background: var(--palm);
  background: linear-gradient(165deg, var(--palm) 0%, var(--night) 78%);
  color: var(--ivory);
  display:none; flex-direction:column;
  padding: calc(var(--header-h) + 1rem) 2rem 2.5rem;
  overflow-y:auto;
}
html.menu-open .menu-overlay{ display:flex; }
html.menu-open{ overflow:hidden; }
.menu-overlay nav ul{ display:flex; flex-direction:column; gap:.4rem; list-style:none; margin:0; padding:0; }
.menu-overlay nav a{
  font-family:var(--serif); font-size:clamp(1.9rem, 7vw, 2.7rem);
  color:var(--ivory); text-decoration:none; line-height:1.35;
}
.menu-overlay nav a:hover{ color:var(--bronze); }
.menu-overlay .menu-foot{ margin-top:auto; padding-top:2.5rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.menu-overlay .field-note{ color:var(--khaki); }
.menu-close{
  position:absolute; top:1rem; right:1.1rem;
  width:3rem; height:3rem; border-radius:50%;
  background:none; border:1.5px solid rgba(243,235,219,.4); color:var(--ivory);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.menu-close svg{ width:1.3rem; height:1.3rem; }

/* ---------- image grade: one shoot, one grade (tokens.md §5) ---------- */
.cine{ position:relative; overflow:hidden; background:var(--forest); }
.cine img{
  width:100%; height:100%; object-fit:cover;
  filter: saturate(.82) contrast(1.06) brightness(.94) sepia(.12);
}
.cine::after{ /* warm wash + gentle vignette */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(18,22,15,.12) 0%, rgba(18,22,15,0) 35%, rgba(18,22,15,.28) 100%),
    radial-gradient(120% 90% at 50% 45%, rgba(192,137,78,.08) 0%, rgba(18,22,15,.18) 100%);
}
.cine .fig-note{
  position:absolute; left:1.1rem; bottom:.9rem; z-index:2;
  font-family:var(--mono); font-size:var(--fs-fignote); letter-spacing:.16em; text-transform:uppercase;
  color: rgba(243,235,219,.92);
  text-shadow: 0 1px 10px rgba(18,22,15,.75);
}

/* ============================================================
   journey wrap — sections paint their grounds on ::before at
   z-index:-1 so the journey line threads OVER light AND dark.
   Stacking: canvas forest < grounds < line(0) < content(1)
   < torch(1400) < fireflies(1500) < grain(2000) < menu(2100).
   ============================================================ */
.journey-wrap{ position:relative; /* deliberately NO background and NO z-index */ }
.journey{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}
.journey path{
  fill:none;
  stroke-width:1.75;
  stroke-linecap:round;
  vector-effect: non-scaling-stroke;
  opacity:.5;
  stroke-dasharray:1;
  stroke-dashoffset:0; /* ships fully drawn; JS un-draws when motion is allowed */
}
.jw-sec{ position:relative; /* NO z-index — lets ::before sink below the line */ }
.jw-sec::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--sec-bg, transparent); }
.jw-sec > *{ position:relative; z-index:1; }

/* hand-drawn stamps (self-drawing icons; give shapes pathLength="1") */
.stamp{ display:block; width:3.4rem; height:auto; color:var(--clay); }
.stamp :is(path,circle,line){
  fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:0;
}
.stamp--lg{ width:clamp(5rem, 10vw, 7.5rem); }
.on-dark .stamp{ color: var(--bronze); }
.on-dark .season-stamp .stamp{ color: var(--ivory); }
.on-dark .earthblock .stamp{ color: var(--clay-deep); } /* strata placeholder is a lit surface */

/* ---------- shared section chrome ---------- */
.section{ padding-block: var(--sect); }
.section-head{ max-width:46rem; margin-bottom:clamp(2.5rem, 6vw, 4.5rem); }
.section-head .stamp{ margin-bottom:var(--s-3); }

/* composable grounds for .jw-sec (set --sec-bg), per tokens.md §6 */
.ground-ivory{ --sec-bg: var(--ivory); }
.ground-sand{ --sec-bg: var(--sand); }
.ground-clay{ --sec-bg: var(--clay); }
.ground-night{ --sec-bg: var(--night); }
.ground-forest{ --sec-bg: var(--forest); }
.ground-palm{ --sec-bg: var(--ground-stay); }
.ground-exps{ --sec-bg: var(--ground-exps); }

/* --- transition bands: the canopy opening and closing over the page --- */
.band{
  min-height:40svh;
  display:flex; align-items:flex-end;
  text-align:center;
  padding-bottom:clamp(3rem, 8vw, 5rem);
}
.band .container{ display:flex; flex-direction:column; align-items:center; gap:var(--s-2); }
.band p.big{ font-family:var(--serif); font-size:var(--fs-700); color:var(--ivory); max-width:22em; text-wrap:balance; }
.daybreak{ --sec-bg: var(--grad-daybreak); min-height:44svh; }
.daybreak p.big{ color:var(--ink); }
.daybreak .field-note{ color:var(--clay-deep); }
.descent{ --sec-bg: var(--grad-descent); min-height:52svh; }
.lamplight{ --sec-bg: var(--grad-lamplight); min-height:32svh; align-items:center; padding-bottom:0; }
.lastlight{ --sec-bg: var(--grad-lastlight); min-height:38svh; }
.lastlight p.big{ color:var(--ink); text-shadow:none; }
.lastlight .field-note{ color:var(--clay-deep); }

/* --- chalet cards + rammed-earth strata placeholder blocks --- */
.stay-cards{ display:grid; gap:clamp(1.5rem, 4vw, 2.5rem); }
@media (min-width:50em){ .stay-cards{ grid-template-columns:1fr 1fr; } }
.chalet-card{ display:flex; flex-direction:column; }
.earthblock{
  position:relative;
  border-radius:var(--radius-arch);
  overflow:hidden; aspect-ratio:4/4.4;
  background: var(--strata), var(--sand);
  display:flex; align-items:flex-end; justify-content:center;
}
.earthblock::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(243,235,219,.55), rgba(243,235,219,0) 45%, rgba(143,61,27,.16));
}
.earthblock .stamp{ position:absolute; top:18%; left:50%; transform:translateX(-50%); color:var(--clay-deep); opacity:.85; }
.earthblock-label{
  position:relative; z-index:1; margin-bottom:1.4rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--clay-deep);
  background:rgba(243,235,219,.85);
  padding:.5rem 1.1rem; border-radius:var(--radius-pill);
}
.chalet-card h3{ margin-top:var(--s-3); font-size:var(--fs-700); }
.chalet-card .chalet-meta{ margin-top:.5rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.chalet-card p{ margin-top:.9rem; color:var(--umber); }
.on-dark .chalet-card p{ color:var(--khaki); }
.chalet-card .textlink{ margin-top:1.1rem; align-self:flex-start; }

/* --- experience cards --- */
.exp-grid{ display:grid; gap:clamp(1.5rem, 3.5vw, 2.25rem); }
@media (min-width:44em){ .exp-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:66em){ .exp-grid{ grid-template-columns:repeat(12, 1fr); } }
.exp-card{ position:relative; display:block; text-decoration:none; color:var(--ink); }
.on-dark .exp-card{ color:var(--ivory); }
@media (min-width:66em){
  .exp-card--flag{ grid-column:span 6; }
  .exp-card:nth-child(2), .exp-card:nth-child(3){ grid-column:span 3; }
  .exp-card:nth-child(4), .exp-card:nth-child(5){ grid-column:span 6; }
}
.exp-figure{ overflow:hidden; background:var(--sand); border-radius:var(--radius); aspect-ratio:4/3; }
.on-dark .exp-figure{ background:var(--night); }
.exp-card--flag .exp-figure{ border-radius:var(--radius-arch); aspect-ratio:4/4.2; }
.exp-card--blob .exp-figure{ border-radius:56% 44% 52% 48% / 46% 50% 50% 54%; }
.exp-figure img{ transition:transform 1.2s var(--ease-out); will-change:transform; height:110%; }
.exp-card:hover .exp-figure img, .exp-card:focus-visible .exp-figure img{ transform:scale(1.045); }
.exp-card .field-note{ display:block; margin-top:1.1rem; }
.exp-card h3{ margin-top:.35rem; display:flex; align-items:baseline; gap:.6rem; }
.exp-card h3 .go{ flex:none; width:.85em; height:.85em; color:var(--clay-deep); transition:transform var(--dur) var(--ease-out); }
.on-dark .exp-card h3 .go{ color:var(--bronze); }
.exp-card:hover h3 .go{ transform:translateX(5px); }
.exp-card p{ margin-top:.45rem; color:var(--umber); font-size:.98rem; }
.on-dark .exp-card p{ color:var(--khaki); }
.exp-card--flag .field-note{ color:var(--clay-deep); }
.on-dark .exp-card--flag .field-note{ color:var(--bronze); }

/* --- field-index marquee: the instrument voice on one slow pass (70s) ---
   Markup: .field-index > .fi-track > .fi-list (main.js duplicates the list). */
.field-index{
  --sec-bg: var(--forest);
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  padding-block:1.05rem;
  overflow:hidden;
}
.fi-track{ display:flex; width:max-content; will-change:transform; }
@media (prefers-reduced-motion: no-preference){
  html.js:not(.rm) .fi-track{ animation: fi-scroll 70s linear infinite; }
}
.fi-list{
  display:flex; align-items:baseline; gap:2.6rem;
  padding-right:2.6rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--khaki); white-space:nowrap;
  list-style:none; margin:0;
}
.fi-list .fi-dot{ color:var(--bronze); letter-spacing:0; }
.fi-list b{ font-weight:500; color:rgba(243,235,219,.85); }
@keyframes fi-scroll{ to{ transform:translateX(-50%); } }

/* --- quote cards (guest log) --- */
.quote-grid{ display:grid; gap:clamp(1.75rem, 4vw, 2.5rem); }
@media (min-width:56em){ .quote-grid{ grid-template-columns:repeat(3, 1fr); } }
.quote{
  border-top:1.5px solid transparent;
  border-image: linear-gradient(90deg, #8A6238, #C9A25E 45%, rgba(201,162,94,0)) 1;
  padding-top:1.5rem;
}
.quote blockquote p{ font-family:var(--serif); font-style:italic; font-size:1.16rem; line-height:1.5; color:var(--ivory); }
.quote .field-note{ display:block; margin-top:1.1rem; }

/* --- journal list (editorial index rows) --- */
.journal-list li{ border-bottom:1px solid var(--line-dark); }
.journal-list a{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.35rem 2rem;
  padding:1.1rem 0; text-decoration:none; color:rgba(243,235,219,.88);
  transition: color var(--dur) var(--ease-out), padding-left var(--dur) var(--ease-out);
}
.journal-list a:hover{ color:var(--sand); padding-left:.65rem; }
.journal-list .jl-title{ font-family:var(--serif); font-size:1.12rem; }
.journal-list .jl-date{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--khaki); }

/* --- book band (tank sand) — the journey line terminates here --- */
.book-band{ --sec-bg: var(--sand); text-align:center; }
.book-band .stamp{ margin:0 auto var(--s-3); }
.book-band h2{ max-width:15em; margin-inline:auto; }
.book-band .lede{ margin:1.25rem auto 0; color:var(--umber); max-width:38em; }
.book-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.25rem; margin-top:var(--s-4); }
.book-band .field-note{ display:block; margin-top:var(--s-3); }
.booking-widget{ margin-top:var(--s-4); }

/* ---------- generic page chrome (page.php, index.php, 404) ---------- */
.page-hero{
  padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)) 0 clamp(2.5rem, 6vw, 4rem);
  background:
    radial-gradient(110% 60% at 72% 100%, rgba(192,137,78,.10), transparent 62%),
    linear-gradient(180deg, var(--night) 0%, var(--forest) 100%);
}
.page-hero h1{ max-width:14em; }
.page-hero .lede{ margin-top:var(--s-3); color:var(--khaki); max-width:34em; }

/* the generic Gutenberg content interlude (ivory) */
.entry-zone{ --sec-bg: var(--ivory); }
.entry-content{ max-width:46rem; margin-inline:auto; }
.entry-content > *{ margin-block: 1.15em 0; }
.entry-content > *:first-child{ margin-top:0; }
.entry-content h2{ margin-top:1.6em; font-size:var(--fs-700); }
.entry-content h3{ margin-top:1.4em; }
.entry-content a{ color:var(--clay-deep); text-decoration-color:rgba(143,61,27,.4); text-underline-offset:3px; }
.entry-content ul{ list-style:disc; padding-left:1.4em; }
.entry-content ol{ padding-left:1.4em; }
.entry-content li{ margin-block:.35em; }
.entry-content blockquote{
  border-top:1.5px solid transparent;
  border-image: var(--bronze-grad) 1;
  padding-top:1.25rem; margin-top:1.6em;
  font-family:var(--serif); font-style:italic; font-size:1.16rem; line-height:1.5;
}
.entry-content blockquote cite{ display:block; margin-top:.8rem; font-family:var(--mono); font-style:normal; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--umber); }
.entry-content img{ border-radius:var(--radius); }
.entry-content figcaption{
  font-family:var(--mono); font-size:var(--fs-fignote); letter-spacing:.16em; text-transform:uppercase;
  color:var(--umber); margin-top:.7rem;
}
.entry-content hr{
  border:none; border-top:1.5px dashed var(--dash-light); margin-block:2.2em;
}
.entry-content .alignwide{ max-width:64rem; margin-inline:auto; }
.entry-content .alignfull{ max-width:none; margin-inline:calc(50% - 50vw); }
.entry-content pre, .entry-content code{ font-family:var(--mono); font-size:.9em; }

/* ---------- contact form ---------- */
.muwan-form{ max-width:38rem; }
.muwan-form .hp-field{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.muwan-form .form-row{ display:grid; gap:1rem; }
@media (min-width:40em){ .muwan-form .form-row{ grid-template-columns:1fr 1fr; } }
.form-field{ display:flex; flex-direction:column; gap:.4rem; margin-top:1.1rem; }
.form-field label{
  font-size:.8125rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--umber);
}
.form-field label .field-note{ text-transform:none; letter-spacing:.08em; }
.form-field input, .form-field textarea{
  font:inherit; color:var(--ink);
  background:rgba(255,252,244,.55);
  border:1.5px solid rgba(41,34,22,.28);
  border-radius:.65rem;
  padding:.75rem 1rem;
  transition:border-color var(--dur) var(--ease-out);
}
.form-field input:focus, .form-field textarea:focus{ outline:none; border-color:var(--bronze); box-shadow:0 0 0 2.5px rgba(192,137,78,.35); }
.form-actions{ display:flex; align-items:center; gap:1.25rem; margin-top:1.6rem; flex-wrap:wrap; }
.form-status{ padding:.9rem 1.2rem; border-radius:.65rem; font-weight:600; margin-bottom:1.25rem; }
.form-status--ok{ background:rgba(36,64,44,.12); border:1.5px solid rgba(36,64,44,.4); color:#24402C; }
.form-status--error{ background:rgba(143,61,27,.1); border:1.5px solid rgba(143,61,27,.45); color:var(--clay-deep); }
.muwan-form--dark .form-field label{ color:var(--khaki); }
.muwan-form--dark .form-field input, .muwan-form--dark .form-field textarea{
  color:var(--ivory); background:rgba(18,22,15,.35); border-color:rgba(243,235,219,.3);
}
.muwan-form--dark .form-status--ok{ background:rgba(192,137,78,.12); border-color:rgba(192,137,78,.45); color:var(--sand); }
.muwan-form--dark .form-status--error{ background:rgba(179,85,43,.16); border-color:rgba(179,85,43,.5); color:var(--sand); }

/* ---------- footer (Forest→Night — the page ends at its deepest) ---------- */
.site-footer{ background:var(--forest); background:var(--grad-footer); color:rgba(243,235,219,.85); padding:clamp(3.5rem, 8vw, 5.5rem) 0 2rem; }
.footer-grid{ display:grid; gap:2.75rem; }
@media (min-width:56em){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1.1fr; } }
.site-footer .brand{ color:var(--ivory); }
.site-footer .brand-sub{ color:var(--khaki); }
.footer-blurb{ margin-top:1.1rem; font-size:.95rem; max-width:26rem; color:rgba(243,235,219,.75); }
.footer-col h3{ font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--bronze); margin-bottom:1.1rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col ul li{ margin-bottom:.55rem; }
.footer-col a{ color:rgba(243,235,219,.85); text-decoration:none; transition:color var(--dur) var(--ease-out); }
.footer-col a:hover{ color:var(--ivory); }
.footer-col address{ font-style:normal; font-size:.95rem; line-height:1.8; }
.social-row{ display:flex; gap:.9rem; margin-top:1.2rem; }
.social-row a{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; border-radius:50%;
  border:1.5px solid rgba(243,235,219,.35); color:var(--ivory);
  transition:border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.social-row a:hover{ border-color:var(--bronze); background:rgba(243,235,219,.1); }
.social-row svg{ width:1.1rem; height:1.1rem; }
.footer-legal{
  margin-top:clamp(2.5rem, 6vw, 4rem); padding-top:1.5rem;
  border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem;
}
.footer-legal .field-note{ color:var(--khaki); letter-spacing:.14em; }

/* reveal defaults: content fully visible without JS; GSAP takes over when present */
[data-reveal]{ will-change:transform, opacity; }

/* ---------- ambient layer: fireflies + torchlight ----------
   Fixed full-viewport, above content, UNDER the grain (2000) and menu (2100).
   Opacity driven by dark coverage (main.js); created only when JS runs AND
   motion is allowed. */
#fireflies{
  position:fixed; inset:0; z-index:1500;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.2s linear;
}
html:not(.js) #fireflies, html.rm #fireflies{ display:none; }
.torch{
  position:fixed; inset:0; z-index:1400;
  pointer-events:none; overflow:hidden;
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity 1.2s linear;
}
.torch-glow{
  position:absolute; top:0; left:0;
  width:58rem; height:58rem; margin:-29rem 0 0 -29rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(192,137,78,.14) 0%, rgba(192,137,78,.05) 42%, rgba(192,137,78,0) 68%);
  will-change:transform;
}

/* ---------- reduced motion: the kill-switch (tokens.md §8) ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}