/* ============================================================
   Noir District — luxury private residences.
   Exaggerated minimalism: obsidian + champagne gold, Cinzel
   display over Josefin Sans, hairline gold rules, oversized
   numerals, generous negative space. Pairs with the shared
   atelier.js motion engine + a live WebGL shader hero.
   ============================================================ */
:root{
  --noir:#08080b; --noir-2:#0d0d11; --panel:#111117;
  --ink:#f4efe6; --muted:#9c948a; --faint:#645d55;
  --gold:#d9b26a; --gold-2:#f0d9a6; --line:rgba(217,178,106,.18);
  --serif:"Cinzel", Georgia, serif;
  --body:"Josefin Sans", system-ui, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--noir); color:var(--ink);
  font-family:var(--body); font-weight:300; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
em{font-style:italic; color:var(--gold)}
.wrap{width:min(1240px,92vw); margin-inline:auto}
.eyebrow{
  font-size:.7rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold); font-weight:500;
}
.serif{font-family:var(--serif)}

/* ---- texture overlays ---- */
.grain{position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.vignette{position:fixed; inset:0; z-index:9997; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 0%, transparent 55%, rgba(0,0,0,.55));}

/* ---- custom cursor (desktop) ---- */
.cursor,.cursor-ring{position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; mix-blend-mode:difference}
.cursor{width:7px; height:7px; background:var(--gold-2)}
.cursor-ring{width:38px; height:38px; border:1px solid rgba(240,217,166,.55); transition:width .3s,height .3s,opacity .3s}
.cursor-ring.hot{width:62px; height:62px; opacity:.6}
@media (hover:none){.cursor,.cursor-ring{display:none}}

/* ---- loader ---- */
.loader{position:fixed; inset:0; z-index:10000; background:var(--noir); display:grid; place-items:center}
.loader-inner{text-align:center}
.loader-num{font-family:var(--serif); font-size:clamp(3rem,12vw,7rem); color:var(--gold); line-height:1}
.loader-word{display:block; margin-top:.6rem; letter-spacing:.4em; text-transform:uppercase; font-size:.68rem; color:var(--muted)}

/* ---- nav ---- */
.nav{position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px min(4vw,42px); transition:background .4s,backdrop-filter .4s,padding .4s;}
.nav.solid{background:rgba(8,8,11,.72); backdrop-filter:blur(14px); padding-block:14px; border-bottom:1px solid var(--line)}
.brand{font-family:var(--serif); font-size:1.15rem; letter-spacing:.24em; text-transform:uppercase; font-weight:500}
.brand b{color:var(--gold); font-weight:600}
.nav-links{display:flex; gap:34px}
.nav-links a{font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); transition:color .3s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{border:1px solid var(--gold); color:var(--gold); padding:11px 22px; border-radius:2px;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; transition:background .3s,color .3s}
.nav-cta:hover{background:var(--gold); color:var(--noir)}
.nav-burg{display:none; background:none; border:0; flex-direction:column; gap:6px; cursor:pointer; padding:6px}
.nav-burg span{width:26px; height:1.5px; background:var(--ink); display:block}

/* ---- hero ---- */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden}
.hero-media{position:absolute; inset:-8% 0; z-index:0; overflow:hidden}
.hero-gl{width:100%; height:100%; display:block}
.hero-gl.gl-off{background:radial-gradient(120% 90% at 50% 40%,#15130f,#08080b 70%)}
.hero-media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,8,11,.35) 0%, transparent 30%, rgba(8,8,11,.55) 78%, var(--noir) 100%)}
.hero-inner{position:relative; z-index:2; width:min(1240px,92vw); margin-inline:auto; padding-bottom:8vh}
.hero-eyebrow{opacity:0; transform:translateY(12px)}
.hero h1{font-family:var(--serif); font-weight:500; line-height:.98;
  font-size:clamp(3.2rem,11vw,10.5rem); letter-spacing:-.01em; margin:.28em 0 0}
.hero h1 .ln{display:block; overflow:hidden}
.hero h1 .ln>span{display:block}
.hero-foot{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-top:3.4vh; flex-wrap:wrap}
.hero-foot p{max-width:42ch; color:var(--muted); opacity:0; font-size:1.02rem}
.scroll-cue{font-size:.68rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:12px; white-space:nowrap}
.scroll-cue i{width:46px; height:1px; background:var(--gold); display:inline-block; position:relative; overflow:hidden}
.scroll-cue i::after{content:""; position:absolute; inset:0; background:var(--noir); animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ---- section rhythm ---- */
.section{padding:clamp(6rem,14vh,11rem) 0}
.sec-head{display:flex; justify-content:space-between; align-items:baseline; gap:24px; margin-bottom:3.2rem; flex-wrap:wrap}
h2{font-family:var(--serif); font-weight:500; line-height:1.02; letter-spacing:-.01em;
  font-size:clamp(2.2rem,6vw,4.6rem); margin:0}

/* ---- manifesto ---- */
.manifesto{text-align:center}
.manifesto p{font-family:var(--serif); font-weight:400; line-height:1.32;
  font-size:clamp(1.5rem,4.4vw,3rem); max-width:20ch; margin-inline:auto}
.manifesto .word{color:var(--faint); transition:color .5s}
.manifesto .word.on{color:var(--ink)}
.manifesto em{color:var(--gold)}

/* ---- horizontal pinned gallery ---- */
.h-scroll{position:relative}
.h-pin{height:100svh; overflow:hidden; display:flex; align-items:center}
.h-track{display:flex; align-items:center; gap:min(6vw,84px); padding-inline:min(4vw,42px); will-change:transform}
.h-intro{flex:0 0 auto; width:min(40vw,440px); padding-right:2vw}
.h-intro h2{margin-top:1rem}
.h-card{flex:0 0 auto; width:min(74vw,540px)}
.h-figure{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--panel); border:1px solid var(--line)}
.h-figure img{width:100%; height:100%; object-fit:cover; will-change:transform}
.h-num{position:absolute; top:16px; left:18px; z-index:2; font-family:var(--serif); font-size:1rem; color:var(--gold-2); letter-spacing:.1em}
.h-meta{display:flex; justify-content:space-between; align-items:baseline; margin-top:18px; gap:16px; border-top:1px solid var(--line); padding-top:14px}
.h-meta h3{font-family:var(--serif); font-weight:500; font-size:1.5rem; margin:0}
.h-meta span{font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.h-progress{position:absolute; left:min(4vw,42px); right:min(4vw,42px); bottom:38px; height:1px; background:var(--line)}
.h-progress i{display:block; height:100%; width:0; background:var(--gold)}

/* ---- feature ---- */
.feature{display:grid; grid-template-columns:1.05fr .95fr; gap:min(6vw,72px); align-items:center}
.feature-fig{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--panel)}
.feature-fig img{width:100%; height:100%; object-fit:cover}
.feature-fig .mask{position:absolute; inset:0; background:var(--noir); transform-origin:left}
.feature h2{margin:.5rem 0 1.2rem}
.feature p{color:var(--muted); max-width:46ch}
[data-fade]{opacity:0; transform:translateY(22px)}
.tag-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:1.8rem}
.tag-row span{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  border:1px solid var(--line); padding:8px 14px; border-radius:2px}

/* ---- stats ---- */
.stats{border-block:1px solid var(--line)}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.stat{text-align:center}
.stat h3{font-family:var(--serif); font-weight:500; font-size:clamp(2.4rem,5vw,3.8rem); margin:0; color:var(--gold-2)}
.stat p{margin:.4rem 0 0; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}

/* ---- services / amenities list ---- */
.svc-list{border-top:1px solid var(--line)}
.svc{display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:clamp(1.3rem,3.4vw,2.4rem) 4px; border-bottom:1px solid var(--line); cursor:pointer;
  transition:padding-left .4s,color .4s}
.svc:hover{padding-left:22px}
.svc-name{font-family:var(--serif); font-weight:500; font-size:clamp(1.4rem,3.4vw,2.4rem); transition:color .4s}
.svc:hover .svc-name{color:var(--gold)}
.svc-idx{font-size:.72rem; letter-spacing:.2em; color:var(--muted)}
.svc-peek{position:fixed; top:0; left:0; z-index:800; width:280px; height:340px; margin:-170px 0 0 -140px;
  pointer-events:none; opacity:0; transform:scale(.92); transition:opacity .35s,transform .35s; overflow:hidden; border:1px solid var(--line)}
.svc-peek.on{opacity:1; transform:scale(1)}
.svc-peek img{width:100%; height:100%; object-fit:cover}
@media (hover:none){.svc-peek{display:none}}

/* ---- marquee ---- */
.marquee{overflow:hidden; border-block:1px solid var(--line); padding:26px 0}
.marquee-in{display:inline-flex; gap:56px; white-space:nowrap; will-change:transform}
.marquee-in span{font-family:var(--serif); font-size:clamp(1.4rem,3vw,2.2rem); color:var(--faint); letter-spacing:.04em}
.marquee-in span:nth-child(3n){color:var(--gold)}

/* ---- cta ---- */
.cta{text-align:center}
.cta h2{margin:.6rem 0 2.2rem}
.cta a{display:inline-flex; align-items:center; gap:14px; font-family:var(--serif); font-size:1.15rem;
  color:var(--gold); border:1px solid var(--gold); padding:18px 34px; border-radius:2px; transition:background .35s,color .35s}
.cta a:hover{background:var(--gold); color:var(--noir)}
.cta a svg{width:22px; height:22px}

/* ---- footer ---- */
.foot{border-top:1px solid var(--line); padding:5rem min(4vw,42px) 2.4rem}
.foot-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap}
.foot-brand{font-family:var(--serif); font-size:clamp(3rem,9vw,6rem); line-height:.86; color:var(--gold); text-transform:uppercase; letter-spacing:.04em}
.foot-cols{display:flex; gap:min(6vw,72px); flex-wrap:wrap}
.foot-col h4{font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin:0 0 1rem}
.foot-col a,.foot-col p{display:block; color:var(--ink); margin:.5rem 0; font-size:.92rem; opacity:.85}
.foot-col a:hover{color:var(--gold)}
.foot-bar{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:3.4rem;
  padding-top:1.6rem; border-top:1px solid var(--line); font-size:.72rem; letter-spacing:.08em; color:var(--faint)}

/* ---- responsive ---- */
@media (max-width:860px){
  .nav-links,.nav-cta{display:none}
  .nav-burg{display:flex}
  .feature{grid-template-columns:1fr; gap:32px}
  .feature-fig{aspect-ratio:4/3}
  .stats-grid{grid-template-columns:repeat(2,1fr); gap:32px 16px}
  .h-intro{width:78vw}
  .h-card{width:82vw}
  .hero-foot{gap:20px}
}
@media (prefers-reduced-motion:reduce){
  .scroll-cue i::after{animation:none}
  [data-fade],.hero-eyebrow,.hero-foot p,.hero h1 .ln>span{opacity:1 !important; transform:none !important}
  .manifesto .word{color:var(--ink)}
}