/* ============================================================
   DOMAINE NOIR — shared design system across all pages
   ============================================================ */
:root{
  --ink:#0b0708; --oxblood:#1c0a0d; --burgundy:#3a0e16;
  --ivory:#ece3d6; --muted:#9a8e84; --gold:#c4a368; --wine:#6a121f;
  --line:rgba(196,163,104,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  --serif:"Cormorant Garamond",serif;
  --sans:"Jost",sans-serif;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ width:100%; background:var(--ink); color:var(--ivory);
  font-family:var(--sans); overflow-x:hidden;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none; }
html,body{ scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar, body::-webkit-scrollbar{ width:0; height:0; display:none; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ---------- atmosphere (fixed) ---------- */
.vignette{ position:fixed; inset:0; z-index:6; pointer-events:none;
  background:radial-gradient(125% 100% at 50% 44%, transparent 46%, rgba(0,0,0,.5) 100%); }
.grain{ position:fixed; inset:-40%; z-index:7; pointer-events:none; opacity:.05; mix-blend-mode:overlay; }

/* ---------- navigation ---------- */
#nav{ position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:26px clamp(24px,5vw,68px);
  transition:background .6s var(--ease), padding .6s var(--ease), border-color .6s var(--ease);
  border-bottom:1px solid transparent; }
body.scrolled #nav{ background:rgba(8,5,6,.92);
  padding-top:16px; padding-bottom:16px; border-bottom:1px solid rgba(196,163,104,.12); }
#nav .brand{ font-family:var(--serif); font-style:italic; font-size:22px;
  letter-spacing:.16em; color:var(--ivory); white-space:nowrap; }
#nav .links{ display:flex; gap:clamp(16px,2.2vw,38px); align-items:center; }
#nav .links a{ font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted); cursor:pointer; transition:color .5s var(--ease);
  white-space:nowrap; position:relative; padding-bottom:4px; }
#nav .links a:hover{ color:var(--ivory); }
#nav .links a.active{ color:var(--ivory); }
#nav .links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--gold); }
.reserve{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold);
  border:1px solid rgba(196,163,104,.4); padding:11px 22px; border-radius:1px; cursor:pointer;
  white-space:nowrap; transition:background .5s var(--ease), color .5s var(--ease); }
.reserve:hover{ background:var(--gold); color:var(--ink); }

/* mobile menu */
.burger{ display:none; width:30px; height:18px; position:relative; cursor:pointer; z-index:42; }
.burger span{ position:absolute; left:0; right:0; height:1px; background:var(--ivory);
  transition:transform .4s var(--ease), opacity .3s var(--ease); }
.burger span:nth-child(1){ top:0; } .burger span:nth-child(2){ top:8px; } .burger span:nth-child(3){ top:16px; }
body.menu-open .burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
#mobile-menu{ position:fixed; inset:0; z-index:39; background:rgba(7,4,5,.98);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
  opacity:0; pointer-events:none; transition:opacity .5s var(--ease); }
body.menu-open #mobile-menu{ opacity:1; pointer-events:auto; }
#mobile-menu a{ font-family:var(--serif); font-style:italic; font-size:32px; color:var(--ivory);
  letter-spacing:.04em; opacity:.85; }
#mobile-menu a:hover{ color:var(--gold); }

@media (max-width:880px){
  #nav .links{ display:none; }
  #nav .reserve{ display:none; }
  .burger{ display:block; }
}

/* ---------- shared editorial type ---------- */
.eyebrow{ display:block; font-size:11px; letter-spacing:.46em; text-transform:uppercase;
  color:var(--gold); margin-bottom:28px; }
.display{ font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(40px,6.4vw,104px); line-height:1.0; color:#f3ece0; letter-spacing:.005em;
  text-shadow:0 2px 40px rgba(0,0,0,.6); }
.lead{ color:#cdc2b5; font-weight:300; font-size:clamp(15px,1.35vw,19px); line-height:1.95;
  letter-spacing:.01em; max-width:46ch; }
.gold-tick{ display:block; width:1px; height:60px; background:linear-gradient(var(--gold),transparent); }
.hair{ width:34px; height:1px; background:rgba(196,163,104,.5); }
.center{ text-align:center; }
.center .lead, .center .display{ margin-left:auto; margin-right:auto; }

/* ---------- page hero (top of each interior page) ---------- */
.page-hero{ position:relative; min-height:78vh; display:flex; flex-direction:column;
  justify-content:flex-end; padding:0 clamp(28px,8vw,150px) clamp(60px,9vh,110px);
  overflow:hidden; }
.page-hero .ph-inner{ position:relative; z-index:2; max-width:1180px; margin:0 auto; width:100%; }
.page-hero .num{ font-family:var(--serif); font-size:clamp(13px,1vw,15px); letter-spacing:.4em;
  color:var(--gold); margin-bottom:24px; }
.page-hero h1{ font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(50px,9vw,140px); line-height:.95; color:#f5efe4; }
.page-hero .ph-sub{ margin-top:26px; max-width:54ch; color:#cdc2b5; font-weight:300;
  font-size:clamp(15px,1.35vw,19px); line-height:1.9; }
.ph-bg{ position:absolute; inset:0; z-index:0; }
.ph-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,7,8,.4) 0%, rgba(11,7,8,.2) 40%, var(--ink) 100%); }

/* ---------- section scaffold ---------- */
.section{ position:relative; padding:clamp(80px,14vh,170px) clamp(28px,8vw,150px); overflow:hidden; }
.wrap{ position:relative; max-width:1180px; margin:0 auto; }
.wrap-narrow{ max-width:780px; margin:0 auto; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.d1{ transition-delay:.08s } .d2{ transition-delay:.16s } .d3{ transition-delay:.24s }
.d4{ transition-delay:.32s } .d5{ transition-delay:.40s }

/* ---------- buttons ---------- */
.cta{ display:inline-block; font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(196,163,104,.5); padding:16px 34px; border-radius:1px;
  cursor:pointer; transition:background .5s var(--ease), color .5s var(--ease); }
.cta:hover{ background:var(--gold); color:var(--ink); }
.cta-ghost{ color:var(--ivory); border-color:rgba(236,227,214,.3); }
.cta-ghost:hover{ background:var(--ivory); color:var(--ink); border-color:var(--ivory); }

/* ---------- footer ---------- */
footer{ position:relative; z-index:4; padding:13vh clamp(28px,9vw,150px) 8vh;
  background:#050304; border-top:1px solid rgba(196,163,104,.12); }
footer .f-top{ display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:46px; padding-bottom:8vh; border-bottom:1px solid var(--line); }
footer .mark{ font-family:var(--serif); font-style:italic; font-size:clamp(30px,4vw,46px);
  letter-spacing:.16em; color:#f3ece0; }
footer .f-tag{ margin-top:16px; color:var(--muted); font-size:12px; letter-spacing:.06em;
  max-width:34ch; line-height:1.9; font-weight:300; }
footer .f-cols{ display:flex; gap:clamp(40px,7vw,110px); flex-wrap:wrap; }
footer .f-col h5{ font-size:10px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin-bottom:20px; }
footer .f-col a, footer .f-col p{ display:block; color:var(--muted); font-weight:300;
  font-size:14px; line-height:2.3; transition:color .4s var(--ease); }
footer .f-col a:hover{ color:var(--ivory); }
footer .f-bot{ display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px; padding-top:34px; }
footer .f-bot small{ color:var(--muted); font-size:11px; letter-spacing:.22em; }

/* ---------- loader ---------- */
#loader{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  background:var(--ink); transition:opacity 1s var(--ease); }
#loader.gone{ opacity:0; pointer-events:none; }
#loader .mk{ font-family:var(--serif); font-style:italic; font-size:30px;
  letter-spacing:.3em; color:var(--ivory); opacity:.5; animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.22} 50%{opacity:.7} }

@media (max-width:820px){
  .page-hero{ min-height:66vh; }
}