@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400&family=Inter:wght@300;400;500;600&display=swap');

:root{
  --ink:#1c1a16;
  --bone:#f2ede3;
  --bronze:#a67c46;
  --bronze-light:#c9a36b;
  --deep:#11100e;
  --line:rgba(242,237,227,0.18);
  --serif:'Fraunces', serif;
  --sans:'Inter', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--deep);
  color:var(--bone);
  font-family:var(--sans);
  font-weight:300;
  overflow-x:hidden;
}
img{display:block;width:100%;height:100%;object-fit:cover;}
a{color:inherit;text-decoration:none;}

/* ---------- NAV ---------- */
.topnav{
  position:fixed; top:0; left:0; right:0;
  z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:20px 32px 20px 48px;
  mix-blend-mode:difference;
}
.topnav .mark{
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  flex:0 0 auto;
}
.topnav nav{
  display:flex; gap:26px;
  flex:1 1 auto;
  justify-content:center;
  min-width:0;
}
.topnav nav a{
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  opacity:0.85;
  white-space:nowrap;
}
.lang-switch{
  position:relative;
  flex:0 0 auto;
}
.lang-switch summary{
  list-style:none;
  cursor:pointer;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.12em;
  padding:9px 16px;
  border-radius:20px;
  background:rgba(17,16,14,0.55);
  border:1px solid var(--line);
  backdrop-filter:blur(8px);
  color:var(--bone);
  display:flex; align-items:center; gap:7px;
  white-space:nowrap;
}
.lang-switch summary::-webkit-details-marker{display:none;}
.lang-switch summary::after{content:"▾"; font-size:8px; opacity:0.6;}
.lang-switch[open] summary::after{content:"▴";}
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--ink);
  border:1px solid var(--line);
  min-width:170px;
  display:flex; flex-direction:column;
  padding:6px;
  z-index:1000;
}
.lang-menu a{
  padding:9px 14px;
  font-size:12px;
  letter-spacing:0.03em;
  color:var(--bone);
  opacity:0.65;
  border-radius:3px;
  white-space:nowrap;
  display:block;
}
.lang-menu a:hover{background:rgba(166,124,70,0.15); opacity:1;}
.lang-menu a.active{color:var(--bronze-light); opacity:1;}
@media (max-width:980px){
  .topnav nav{display:none;}
  .topnav{padding:18px 20px;}
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  height:100vh;
  min-height:620px;
  display:flex;
  align-items:flex-end;
}
.hero img{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(17,16,14,0.15) 0%, rgba(17,16,14,0.1) 40%, rgba(17,16,14,0.92) 100%);
  z-index:1;
}
.hero-content{
  position:relative; z-index:2;
  padding:0 48px 70px;
  max-width:1100px;
}
.hero .eyebrow{
  font-size:12px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--bronze-light);
  margin-bottom:22px;
  display:flex; align-items:center; gap:14px;
}
.hero .eyebrow .rule{width:40px; height:1px; background:var(--bronze-light); display:inline-block;}
.hero h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(40px, 6.6vw, 90px);
  line-height:0.98;
  letter-spacing:-0.01em;
  max-width:900px;
}
.hero h1 em{font-style:italic; font-weight:300; color:var(--bronze-light);}
.hero .sub{
  margin-top:26px;
  font-size:17px;
  font-weight:300;
  max-width:480px;
  line-height:1.6;
  color:rgba(242,237,227,0.78);
}
.hero .scroll-cue{
  position:absolute; bottom:28px; left:48px;
  z-index:2;
  font-size:10px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
  opacity:0.6;
}
.hero .scroll-cue .line{width:1px; height:34px; background:var(--bone); position:relative; overflow:hidden;}
.hero .scroll-cue .line::after{
  content:""; position:absolute; top:-34px; left:0; width:100%; height:34px;
  background:var(--bronze-light);
  animation:scrollline 2.2s ease-in-out infinite;
}
@keyframes scrollline{0%{top:-34px;}100%{top:34px;}}

/* ---------- RATES — SECOND SCREEN ---------- */
.rates{
  padding:90px 48px 110px;
  max-width:1400px; margin:0 auto;
}
.rates-panel{
  border:1px solid var(--line);
  background:var(--ink);
}
.rates-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap;
  padding:30px 32px;
  border-bottom:1px solid var(--line);
}
.rates-head .when{
  font-family:var(--serif);
  font-size:22px;
}
.rates-head .when .small{
  display:block;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--bronze-light);
  margin-bottom:8px;
}
.rates-table{display:flex; flex-direction:column;}
.rate-row{
  display:grid;
  grid-template-columns:24px 1.4fr 1fr 1fr 130px;
  align-items:center;
  gap:24px;
  padding:24px 32px;
  border-bottom:1px solid var(--line);
  transition:background .3s ease;
}
.rates-table .rate-row:last-child{border-bottom:none;}
.rate-row:hover{background:rgba(166,124,70,0.06);}
.rate-row.best{background:rgba(166,124,70,0.1);}
.rate-row .logo-dot{width:9px; height:9px; border-radius:50%; background:var(--bronze-light);}
.rate-row .agency{display:flex; flex-direction:column; gap:4px;}
.rate-row .agency .name{font-family:var(--serif); font-size:19px; font-weight:400;}
.rate-row .agency .note{font-size:11px; color:rgba(242,237,227,0.45); letter-spacing:0.02em;}
.rate-row .room-type{font-size:13px; color:rgba(242,237,227,0.6);}
.rate-row .tagbest{
  font-size:9px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--bronze-light);
  border:1px solid var(--bronze-light);
  padding:4px 10px;
  display:inline-block;
  width:fit-content;
  margin-top:8px;
}
.rate-row .price{text-align:right; font-family:var(--serif); font-size:25px;}
.rate-row .price .cur{font-size:13px; font-family:var(--sans); color:rgba(242,237,227,0.5); margin-right:2px;}
.rate-row .price .pernight{display:block; font-size:10px; font-family:var(--sans); letter-spacing:0.08em; text-transform:uppercase; color:rgba(242,237,227,0.4); margin-top:4px;}
.rate-row .go-btn{
  justify-self:end;
  border:1px solid var(--line);
  padding:11px 22px;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  transition:all .3s ease;
  white-space:nowrap;
}
.rate-row .go-btn:hover{background:var(--bone); color:var(--deep); border-color:var(--bone);}
.rates-foot{
  padding:18px 32px;
  font-size:11px;
  color:rgba(242,237,227,0.4);
  line-height:1.7;
}
@media (max-width:880px){
  .rate-row{grid-template-columns:1fr; gap:8px; text-align:left;}
  .rate-row .logo-dot{display:none;}
  .rate-row .price{text-align:left;}
  .rate-row .go-btn{justify-self:start;}
}

/* ---------- ALTITUDE STRIP — signature element ---------- */
.altitude{
  position:relative;
  background:var(--ink);
  padding:120px 48px;
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  gap:60px;
  align-items:center;
}
.altitude .divider{background:var(--line); height:100%; min-height:240px;}
.altitude .num{
  font-family:var(--serif);
  font-size:clamp(70px,9vw,150px);
  line-height:0.85;
  font-weight:300;
  color:var(--bone);
}
.altitude .num span{
  font-size:0.3em;
  vertical-align:super;
  color:var(--bronze-light);
  font-family:var(--sans);
  letter-spacing:0.05em;
}
.altitude .label{
  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--bronze-light);
  margin-top:14px;
}
.altitude .copy{
  font-family:var(--serif);
  font-size:clamp(22px,2.6vw,32px);
  line-height:1.35;
  font-weight:300;
  max-width:480px;
}
.altitude .copy strong{font-weight:500; color:var(--bronze-light); font-style:italic;}

/* ---------- INTRO / PHILOSOPHY ---------- */
.intro{
  padding:140px 48px;
  max-width:880px;
  margin:0 auto;
  text-align:center;
}
.intro .kicker{
  font-size:12px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--bronze-light); margin-bottom:28px;
}
.intro h2{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(28px,4vw,46px);
  line-height:1.3;
}
.intro h2 em{color:var(--bronze-light); font-style:italic;}

/* ---------- SECTION HEADERS ---------- */
.section-head{
  padding:0 48px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:56px;
  max-width:1400px;
  margin-left:auto; margin-right:auto;
  gap:40px;
  flex-wrap:wrap;
}
.section-head .kicker{
  font-size:12px; letter-spacing:0.28em; text-transform:uppercase; color:var(--bronze-light); margin-bottom:14px;
}
.section-head h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(32px,4.2vw,56px);
  line-height:1.05;
}
.section-head p{
  max-width:340px;
  font-size:14px;
  line-height:1.7;
  color:rgba(242,237,227,0.6);
  padding-bottom:6px;
}

/* ---------- DISCOVER GRID ---------- */
.discover{padding:0;}
.discover-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  margin:0 48px;
}
.d-card{
  background:var(--deep);
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  cursor:default;
}
.d-card img{
  width:100%;height:100%;
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1), filter .6s ease;
  filter:grayscale(35%) brightness(0.82);
}
.d-card:hover img{transform:scale(1.08); filter:grayscale(0%) brightness(0.95);}
.d-card .tag{
  position:absolute; bottom:0; left:0; right:0;
  padding:22px;
  background:linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
}
.d-card .tag h3{
  font-family:var(--serif); font-weight:400; font-size:18px;
}
.d-card .tag span{
  font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--bronze-light);
}
@media (max-width:980px){.discover-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- ROOMS ---------- */
.rooms{padding:150px 0 0;}
.room-rail{
  display:flex; gap:24px;
  overflow-x:auto;
  padding:0 48px 30px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scrollbar-color:var(--bronze) transparent;
}
.room-rail::-webkit-scrollbar{height:4px;}
.room-rail::-webkit-scrollbar-thumb{background:var(--bronze);}
.r-card{
  flex:0 0 auto;
  width:min(78vw, 400px);
  scroll-snap-align:start;
}
.r-card .frame{
  width:100%; aspect-ratio:4/5;
  overflow:hidden;
  margin-bottom:22px;
  position:relative;
}
.r-card .frame img{transition:transform .8s ease;}
.r-card:hover .frame img{transform:scale(1.05);}
.r-card .frame .badge{
  position:absolute; top:16px; left:16px;
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  background:rgba(17,16,14,0.7); backdrop-filter:blur(4px);
  padding:7px 12px; color:var(--bronze-light);
}
.r-card h3{font-family:var(--serif); font-weight:400; font-size:23px; margin-bottom:8px;}
.r-card p{font-size:13px; color:rgba(242,237,227,0.55); line-height:1.6;}

/* ---------- DINING ---------- */
.dining{padding:150px 48px 0; max-width:1400px; margin:0 auto;}
.dine-list{display:flex; flex-direction:column;}
.dine-row{
  display:grid;
  grid-template-columns:120px 1fr 1.1fr;
  gap:48px;
  align-items:center;
  padding:44px 0;
  border-top:1px solid var(--line);
}
.dine-list .dine-row:last-child{border-bottom:1px solid var(--line);}
.dine-row .idx{
  font-family:var(--serif); font-style:italic; font-size:15px; color:var(--bronze-light);
}
.dine-row .info h3{font-family:var(--serif); font-weight:400; font-size:30px; margin-bottom:10px;}
.dine-row .info .loc{font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--bronze-light); margin-bottom:14px;}
.dine-row .info p{font-size:14px; line-height:1.7; color:rgba(242,237,227,0.62); max-width:480px;}
.dine-row .thumb{width:100%; aspect-ratio:16/10; overflow:hidden;}
.dine-row .thumb img{transition:transform .8s ease;}
.dine-row:hover .thumb img{transform:scale(1.06);}
@media (max-width:880px){
  .dine-row{grid-template-columns:1fr; gap:18px;}
  .dine-row .thumb{order:-1;}
}

/* ---------- WELLNESS / POOL FEATURE ---------- */
.feature-split{
  display:grid; grid-template-columns:1fr 1fr;
  margin-top:150px;
  min-height:640px;
}
.feature-split .img-side{position:relative; overflow:hidden;}
.feature-split .img-side img{height:100%;}
.feature-split .copy-side{
  background:var(--ink);
  display:flex; flex-direction:column; justify-content:center;
  padding:80px;
}
.feature-split .copy-side .kicker{font-size:12px; letter-spacing:0.28em; text-transform:uppercase; color:var(--bronze-light); margin-bottom:24px;}
.feature-split .copy-side h2{font-family:var(--serif); font-weight:300; font-size:clamp(30px,3.6vw,48px); line-height:1.2; margin-bottom:26px;}
.feature-split .copy-side p{font-size:15px; line-height:1.8; color:rgba(242,237,227,0.65); max-width:420px; margin-bottom:14px;}
.feature-split .hours{font-size:12px; letter-spacing:0.08em; color:var(--bronze-light); margin-top:14px;}
@media (max-width:880px){.feature-split{grid-template-columns:1fr;} .feature-split .img-side{aspect-ratio:4/3;} .feature-split .copy-side{padding:60px 32px;}}

/* ---------- AMENITIES STRIP ---------- */
.amenities{
  padding:150px 48px;
  max-width:1400px; margin:0 auto;
}
.amen-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.amen-grid div{
  background:var(--deep);
  padding:34px 26px;
  font-size:13px;
  letter-spacing:0.04em;
  display:flex; align-items:center;
  min-height:90px;
  color:rgba(242,237,227,0.75);
}
@media (max-width:880px){.amen-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- LOCATION ---------- */
.location{
  padding:150px 48px;
  max-width:1400px; margin:0 auto;
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:70px;
  align-items:center;
}
.location .img-wrap{aspect-ratio:4/5; overflow:hidden;}
.location .text .kicker{font-size:12px; letter-spacing:0.28em; text-transform:uppercase; color:var(--bronze-light); margin-bottom:20px;}
.location .text h2{font-family:var(--serif); font-weight:300; font-size:clamp(30px,4vw,50px); line-height:1.18; margin-bottom:28px;}
.location .text p{font-size:15px; line-height:1.85; color:rgba(242,237,227,0.65); margin-bottom:18px; max-width:520px;}
.poi-list{margin-top:34px; display:flex; flex-direction:column;}
.poi{
  display:flex; justify-content:space-between;
  padding:16px 0; border-top:1px solid var(--line);
  font-size:13px;
}
.poi:last-child{border-bottom:1px solid var(--line);}
.poi span:last-child{color:var(--bronze-light); letter-spacing:0.04em;}
@media (max-width:880px){.location{grid-template-columns:1fr;}}

/* ---------- CTA / BOOK ---------- */
.cta{
  position:relative;
  padding:200px 48px;
  text-align:center;
  overflow:hidden;
}
.cta img{position:absolute; inset:0; z-index:0; filter:brightness(0.4);}
.cta-inner{position:relative; z-index:1; max-width:760px; margin:0 auto;}
.cta .kicker{font-size:12px; letter-spacing:0.3em; text-transform:uppercase; color:var(--bronze-light); margin-bottom:26px;}
.cta h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(34px,5.4vw,68px);
  line-height:1.12;
  margin-bottom:40px;
}
.cta h2 em{font-style:italic; color:var(--bronze-light);}
.cta-buttons{display:flex; gap:18px; justify-content:center; flex-wrap:wrap;}
.btn{
  display:inline-block;
  padding:18px 40px;
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  border:1px solid var(--bone);
  transition:all .35s ease;
}
.btn.primary{background:var(--bronze); border-color:var(--bronze); color:var(--deep);}
.btn.primary:hover{background:var(--bronze-light); border-color:var(--bronze-light);}
.btn.ghost:hover{background:var(--bone); color:var(--deep);}
.cta .contact-line{margin-top:46px; font-size:13px; color:rgba(242,237,227,0.6); letter-spacing:0.04em;}

/* ---------- FOOTER ---------- */
footer{
  border-top:1px solid var(--line);
  padding:60px 48px 40px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px;
}
footer .f-mark{font-family:var(--serif); font-size:16px; letter-spacing:0.16em; text-transform:uppercase;}
footer .f-addr{font-size:12px; color:rgba(242,237,227,0.55); line-height:1.8; margin-top:10px;}
footer .f-social{display:flex; gap:20px; align-items:flex-start;}
footer .f-social a{font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(242,237,227,0.6);}
footer .f-social a:hover{color:var(--bronze-light);}
footer .f-copy{width:100%; font-size:11px; color:rgba(242,237,227,0.35); margin-top:30px;}

/* ---------- REVEAL ANIM ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

@media (max-width:640px){
  .altitude{grid-template-columns:1fr; gap:30px; padding:90px 28px;}
  .altitude .divider{display:none;}
  .hero-content{padding:0 24px 60px;}
  .section-head{padding:0 24px;}
  .discover-grid{margin:0 24px;}
  .dining{padding:120px 24px 0;}
  .amenities,.location,.cta{padding-left:24px; padding-right:24px;}
  .rates{padding:60px 24px 80px;}
  footer{padding:50px 24px 30px;}
}