/* ============================================================
   UZHANSKY MOUNTAIN LIVING — rebuilt from Figma (Design 0.2)
   Tokens & primitives
   ============================================================ */
:root{
  --bg:        rgb(20,29,26);
  --bg-soft:   rgb(28,36,33);
  --cream:     rgb(245,240,234);
  --cream-2:   rgb(246,241,234);
  --gold:      rgb(198,169,107);
  --gold-2:    rgb(224,196,138);
  --muted:     rgb(159,168,163);
  --line:      rgba(245,240,234,.10);
  --line-2:    rgba(245,240,234,.14);
  --content:   1328px;   /* 1440 - 56*2 */
  --gutter:    56px;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
::selection{ background:rgba(198,169,107,.3); color:var(--cream); }

/* ---- shared shell ---- */
.wrap{ width:100%; max-width:calc(var(--content) + var(--gutter)*2); margin:0 auto; padding-inline:var(--gutter); }
.section{ position:relative; }

/* ---- type primitives ---- */
.eyebrow{
  font-family:var(--sans); font-weight:500; font-size:10.5px;
  letter-spacing:2.31px; line-height:1; color:var(--cream);
  text-transform:none;
}
.serif{
  font-family:var(--serif);
}
.body {
  font-family:var(--sans); font-weight:300; font-size:15px; line-height:27px; color:var(--muted);
}

/* section mark : gold rule + italic number + tracked label */
.mark{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.mark__rule{
  width:36px;
  height:1px;
  background:var(--gold);
}
.mark__row{
  display:flex;
  align-items:baseline;
  gap:14px; }
.mark__num{ font-family:var(--serif); font-weight:300; font-style:italic; font-size:20px; letter-spacing:-.2px; color:var(--gold); line-height:1; }
.mark__label{ font-family:var(--sans); font-weight:500; font-size:10.5px; letter-spacing:2.31px; color:var(--cream); line-height:1; }

/* centered eyebrow with side rules */
.eyebrow-center{ display:flex; align-items:center; justify-content:center; gap:18px; }
.eyebrow-center .ln{ width:48px; height:1px; background:rgba(245,240,234,.32); }

/* gold pill button */
.btn-cs{
  display:inline-flex; align-items:center; gap:12px;
  padding:14px 26px; border-radius:48px;
  background:linear-gradient(var(--gold),var(--gold-2));
  color:var(--bg); font-family:var(--sans); font-weight:500; font-size:13px; letter-spacing:.26px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.55);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, filter .4s;
}
.btn-cs:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 50px -16px rgba(0,0,0,.6);
  filter:brightness(1.04);
}
.btn-cs svg{
  width:13px;
  height:13px;
}
.btn-cs--lg{
  font-size:16px;
  padding:16px 32px;
}

/* ghost / italic link button */
.ghost-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  letter-spacing:.5px;
  color:var(--cream);
  opacity:.92;
  transition:opacity .3s, gap .3s;
}
.ghost-link:hover{
  opacity:1;
  gap:14px; }
.ghost-link svg{
  width:10px;
  height:10px; }

/* ---- reveal animation primitive ----
   Hidden state only applies once JS confirms it can drive the reveal
   (html.js). No-JS / fallback => content is visible by default. */
.js [data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1),
  transform 1s cubic-bezier(.16,1,.3,1); will-change:opacity,transform;
}
.js [data-reveal].in{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
[data-reveal-delay="4"]{ transition-delay:.32s; }
[data-reveal-delay="5"]{ transition-delay:.40s; }
[data-reveal-delay="6"]{ transition-delay:.48s; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* image cover helper */
.cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.kicker{ font-family:var(--sans); font-size:9px; letter-spacing:1.98px; color:var(--cream); }