/* ============================================================
   MUWAN PALASSA — front page (homepage-specific styles).
   Everything shared (buttons, bands, cards, quotes, marquee,
   book band, ambient layer) lives in main.css; this file carries
   only the hero, the journey stroke, the story interlude, the
   pinned Gathering set piece, the stay/experience grounds, the
   dine interlude and the nightwatch backdrop.
   ============================================================ */

/* ---------- hero (canopy arrival — the dark opens the film) ---------- */
.hero{
  padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)) 0 clamp(2rem, 5vw, 3.5rem);
  position:relative;
  /* night sky settling into forest floor, with heat low on the horizon */
  background:
    radial-gradient(110% 60% at 72% 100%, rgba(192,137,78,.10), transparent 62%),
    linear-gradient(180deg, var(--night) 0%, var(--forest) 58%, var(--forest) 100%);
}
.hero-copy{ position:relative; z-index:2; }
.hero h1{ max-width:11em; }
.hero .kicker{ color: var(--bronze); }
.hero .kicker::before{ background: var(--bronze); }
.hero-line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.hero-line-inner{ display:block; will-change:transform; }
.hero-lede{ margin-top:var(--s-3); font-size:var(--fs-600); line-height:1.55; color:var(--khaki); max-width:34em; }
.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; margin-top:var(--s-4); }
.hero-figure{
  position:relative;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  border-radius: var(--radius-arch); /* the arch: the doorway you arrive through */
  overflow:hidden;
  aspect-ratio:16/10; max-height:74vh; width:100%;
  background: var(--forest);
}
.hero-figure img{ width:100%; height:100%; object-fit:cover; will-change:transform; transform-origin:55% 65%; }
/* season stamp overlapping the arch */
.season-stamp{
  position:absolute; right:clamp(.75rem, 4vw, 3rem); top:-2.6rem; z-index:3;
  width:clamp(6.5rem, 12vw, 8.5rem); height:clamp(6.5rem, 12vw, 8.5rem);
  background:var(--clay); color:var(--ivory);
  border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem;
  text-align:center; transform:rotate(6deg);
  box-shadow:0 10px 30px rgba(41,34,22,.22);
  padding:1rem;
}
.season-stamp .stamp{ width:34%; color:var(--ivory); }
.season-stamp strong{ font-family:var(--serif); font-size:.95em; line-height:1.15; }
.season-stamp span{ font-family:var(--mono); font-size:.55rem; letter-spacing:.2em; text-transform:uppercase; opacity:.9; }

/* ---------- the journey line: this page's material stops ---------- */
.journey path{ stroke: url(#journeyGrad); }

/* --- story / first light — THE first sunlit interlude the dark opens into --- */
.story-sec{ --sec-bg: var(--ivory); }
.story-grid{ display:grid; gap:clamp(2.5rem, 6vw, 5rem); align-items:start; }
@media (min-width:56em){ .story-grid{ grid-template-columns:1.15fr .85fr; } }
.story-facts{ margin-top:var(--s-4); border-top:1.5px dashed var(--dash-light); max-width:38rem; }
.story-facts li{
  display:flex; gap:1rem; align-items:baseline;
  padding:1.05rem 0; border-bottom:1.5px dashed var(--dash-light);
  font-size:1rem; color:var(--ink);
}
.story-facts li strong{ font-family:var(--serif); font-weight:400; font-size:1.1em; color:var(--clay-deep); white-space:nowrap; }
.story-figure{
  border-radius:60% 40% 55% 45% / 48% 52% 46% 54%; /* river-stone blob */
  overflow:hidden; aspect-ratio:4/4.6; background:var(--sand);
  transform:rotate(-1deg);
}
.story-figure img{ width:100%; height:112%; object-fit:cover; will-change:transform; }
.story-caption{ margin-top:1rem; text-align:center; }

/* --- THE GATHERING — pinned documentary cold open --- */
.gathering{ --sec-bg: var(--night); }
.g-pin{ position:relative; height:100svh; overflow:hidden; }
.g-layer{ position:absolute; inset:0; margin:0; opacity:0; border-radius:0; /* the documentary frame is straight-edged */ }
.g-layer.cine img{ filter: saturate(.8) contrast(1.07) brightness(.9) sepia(.14); }
.g-layer.cine::after{
  background: linear-gradient(180deg, rgba(18,22,15,.4) 0%, rgba(18,22,15,.05) 40%, rgba(18,22,15,.72) 100%);
}
.g-layer img{ width:100%; height:100%; object-fit:cover; }
/* static composition for no-JS and reduced motion: the final frame speaks */
.g-layer:first-of-type{ opacity:1; }
html.js .g-layer:first-of-type{ opacity:0; }
html.js.rm .g-layer:first-of-type{ opacity:1; }

.g-caption{
  position:absolute; left:clamp(1.25rem, 4.5vw, 4rem); bottom:clamp(6rem, 16vh, 9rem);
  z-index:5; max-width:30rem;
  opacity:0; visibility:hidden;
}
html:not(.js) .g-caption:first-of-type, html.rm .g-caption:first-of-type{ opacity:1; visibility:visible; }
.g-caption .field-note{ display:block; margin-bottom:var(--s-1); color:var(--bronze); text-shadow:0 1px 14px rgba(18,22,15,.85); }
.g-caption p{ font-family:var(--serif); font-size:clamp(1.25rem, 2.4vw, 1.8rem); line-height:1.3; color:var(--ivory); text-shadow:0 2px 18px rgba(18,22,15,.8); }

.g-count{
  position:absolute; inset:0; z-index:6;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:1rem;
  opacity:0; visibility:hidden;
  background: radial-gradient(80% 60% at 50% 55%, rgba(18,22,15,.55) 0%, rgba(18,22,15,.1) 100%);
}
html:not(.js) .g-count, html.rm .g-count{ opacity:1; visibility:visible; }
.g-num{
  font-family:var(--serif); font-variation-settings:"opsz" 144;
  font-size:var(--fs-count); line-height:1;
  color:var(--ivory);
  font-variant-numeric: tabular-nums;
}
.g-count .field-note{ margin-top:var(--s-2); color:var(--ivory); max-width:26rem; line-height:1.9; text-shadow:0 2px 18px rgba(18,22,15,.8); }
.g-count .field-note b{ color:var(--bronze); }

.g-frame{ position:absolute; inset:0; z-index:7; pointer-events:none; }
.g-frame .field-note{ position:absolute; color:var(--khaki); text-shadow:0 1px 14px rgba(18,22,15,.85); }
.g-frame .fn-tl{ top:calc(var(--header-h) + 1.25rem); left:clamp(1.25rem, 4.5vw, 4rem); }
.g-frame .fn-tr{ top:calc(var(--header-h) + 1.25rem); right:clamp(1.25rem, 4.5vw, 4rem); text-align:right; }
@media (max-width:700px){ .g-frame .fn-tr{ display:none; } }

.g-after{ --sec-bg: var(--night); padding-block: var(--sect); }
.g-after .grid{ display:grid; gap:var(--s-4); }
@media (min-width:56em){ .g-after .grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(2.5rem, 6vw, 6rem); align-items:end; } }

/* --- stay (palm shade — chalets at lamplight) --- */
.stay-sec{ --sec-bg: var(--ground-stay); }
/* real chalet photography (when the client shoot lands) keeps the arch */
.chalet-figure{
  border-radius:var(--radius-arch);
  overflow:hidden; aspect-ratio:4/4.4;
  background:var(--forest);
}

/* --- experiences (forest floor — the gallery dark, photos carry the light) --- */
.exps-sec{ --sec-bg: var(--ground-exps); }

/* --- dine (fired clay) --- */
.dine{ --sec-bg: var(--clay); color:var(--ivory); }
.dine .kicker{ color:var(--sand); }
.dine h2{ color:var(--ivory); }
.dine p{ color:rgba(243,235,219,.92); }
.dine .lede{ color:var(--ivory); }
.dine .stamp{ color:var(--sand); }
.dine .field-note{ color:rgba(243,235,219,.75); }
.dine-grid{ display:grid; gap:clamp(2.5rem, 6vw, 5rem); align-items:center; }
@media (min-width:56em){ .dine-grid{ grid-template-columns:1fr 1fr; } }
.dine-figure{
  border-radius:52% 48% 56% 44% / 50% 46% 54% 50%;
  overflow:hidden; aspect-ratio:1/1; max-width:34rem;
  background:var(--clay-deep);
  transform:rotate(1.5deg);
}
.dine-figure img{ height:112%; will-change:transform; }
.dine-menu{ margin-top:var(--s-4); border-top:1.5px dashed var(--dash-clay); max-width:38rem; }
.dine-menu li{
  display:flex; justify-content:space-between; gap:1.5rem; align-items:baseline;
  padding:.9rem 0; border-bottom:1.5px dashed var(--dash-clay);
  font-size:.98rem;
}
.dine-menu .dish{ font-family:var(--serif); font-size:1.05rem; }
.dine-menu .note{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(243,235,219,.75); text-align:right; }
.dine .btn-ghost{ margin-top:var(--s-4); }

/* --- night: guest log + journal (night tank) --- */
.nightwatch{ --sec-bg: var(--night); overflow:hidden; }
.night-bg{ position:absolute; inset:0; z-index:-1; }  /* sits under the journey line */
.night-bg .cine{ position:absolute; inset:0; }
.night-bg .cine img{ opacity:.5; height:112%; will-change:transform; filter:saturate(.9) contrast(1.05) brightness(.95); }
.night-bg .cine::after{ background:linear-gradient(180deg, rgba(18,22,15,.7), rgba(18,22,15,.3) 45%, rgba(18,22,15,.9)); }
.nightwatch .night-head{ max-width:46rem; }
.nightwatch .night-head .field-note{ color:var(--bronze); }
.nightwatch h2{ margin-top:var(--s-2); }
.nightwatch .quote-grid{ margin-top:clamp(2.5rem, 6vw, 4rem); }
.journal{ margin-top:clamp(4rem, 9vw, 6.5rem); border-top:1px solid var(--line-dark); padding-top:clamp(2.5rem, 5vw, 3.5rem); }
.journal-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:1.75rem; }
.journal-head h3{ font-size:var(--fs-700); color:var(--ivory); }