@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Montserrat:wght@300;400;500&display=swap');

:root { --bg:#090909; --panel:#10100f; --gold:#c49d5a; --cream:#ddd0c8; --muted:#918985; --line:rgba(196,157,90,.18); }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { scroll-behavior:smooth; background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--cream); font-family:Montserrat,Arial,sans-serif; font-weight:300; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.site-header { position:fixed; inset:0 0 auto; z-index:40; height:78px; display:flex; align-items:center; justify-content:space-between; padding:0 3%; background:linear-gradient(#090909,rgba(9,9,9,.82),transparent); }
.brand { font:italic 400 25px "Cormorant Garamond",serif; letter-spacing:.11em; color:#e8ddd6; }
nav { display:flex; gap:38px; }
nav a { font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:#a49b96; transition:.3s; }
nav a:hover { color:var(--gold); }
.menu-button { display:none; }
.hero { min-height:100vh; display:grid; place-items:center; position:relative; overflow:hidden; }
.hero-photo { position:absolute; inset:0; opacity:.34; background-image:linear-gradient(115deg,rgba(7,7,7,.85) 22%,rgba(21,18,15,.28) 65%,rgba(8,8,8,.9)),url('/images/13.jpg'),radial-gradient(ellipse at 67% 42%,rgba(153,105,64,.75),transparent 40%); background-size:cover; background-position:center; animation:breathe 14s ease-in-out infinite alternate; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(9,9,9,.5),rgba(9,9,9,.2) 50%,#090909); }
.hero-content { z-index:2; text-align:center; margin-top:25px; }
.hero-content>p { color:var(--gold); text-transform:uppercase; letter-spacing:.36em; font-size:13px; margin-bottom:25px; }
h1 { margin:0; color:#f0e5df; font:300 clamp(88px,11vw,160px)/.82 "Cormorant Garamond",serif; text-shadow:0 6px 35px rgba(0,0,0,.5); }
h1 span,h1 em { display:block; font-weight:300; }
h1 em { color:var(--gold); margin-left:60px; }
.hero-content i { display:block; width:66px; height:1px; background:var(--gold); opacity:.5; margin:40px auto 24px; }
.hero-content h3 { color:var(--muted); font-size:15px; line-height:1.7; font-weight:300; }
.discover { position:absolute; bottom:30px; z-index:2; text-align:center; color:#8f8782; text-transform:uppercase; letter-spacing:.3em; font-size:10px; }
.discover span { display:block; font-size:24px; line-height:1; }
.section { max-width:1180px; margin:0 auto; min-height:100vh; padding:150px 42px; }
.section.wide { max-width:1420px; }
.section-title { margin-bottom:55px; }
.section-title p { color:var(--gold); text-transform:uppercase; font-size:10px; letter-spacing:.28em; margin-bottom:14px; }
.section-title h2 { font:italic 300 clamp(52px,7vw,92px)/1 "Cormorant Garamond",serif; margin:0; color:#e7dcd5; }
.section-title span { display:block; width:58px; height:1px; background:var(--gold); opacity:.55; margin-top:24px; }
.intro { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:center; }
.portrait { min-height:680px; background-image:linear-gradient(145deg,rgba(196,157,90,.25),transparent 38%),var(--portrait),radial-gradient(circle at 50% 30%,#55443b,#181513 48%,#0b0b0b 76%); background-size:cover;background-position:center;border:1px solid var(--line); position:relative; overflow:hidden; }
.portrait-one{--portrait:url('/images/5.jpg')}.portrait-two{--portrait:url('/images/3.jpg')}.portrait-three{--portrait:url('/images/8.jpg')}
.portrait:after { content:"Add portrait photo"; position:absolute; inset:auto 0 30px; text-align:center; color:rgba(221,208,200,.38); text-transform:uppercase; letter-spacing:.2em; font-size:10px; }
article p { color:#a69d98; line-height:1.95; font-size:14px; }
article .lead { color:#d8cbc4; font:italic 300 26px/1.55 "Cormorant Garamond",serif; }
.signature { margin-top:26px; }
.signature em { color:var(--gold); font:italic 38px "Cormorant Garamond",serif; }
.socials { display:flex; gap:12px; margin-top:48px; }
.socials a { width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:#a99b90; font-size:9px; transition:.3s; }
.socials a:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-3px); }
.gallery-section .section-title { text-align:center; }
.gallery-section .section-title span { margin-left:auto; margin-right:auto; }
.gallery-grid { columns:4 220px; column-gap:18px; }
.gallery-card { border:0; width:100%; height:390px; margin:0 0 18px; break-inside:avoid; cursor:pointer; position:relative; color:white; overflow:hidden; background:#1b1816; }
.gallery-card:nth-child(3n+1) { height:500px; }
.gallery-card:nth-child(4n+2) { height:315px; }
.gallery-card:before,.lightbox-photo:before { content:""; position:absolute; inset:0; background-image:var(--image),var(--photo); background-size:cover; background-position:center; transform:scale(1.01); transition:.7s; }
.gallery-card:after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.7),transparent 55%); opacity:0; transition:.4s; }
.gallery-card:hover:before { transform:scale(1.06); }
.gallery-card:hover:after,.gallery-card:hover .view { opacity:1; }
.photo-number { position:absolute; top:16px; left:17px; z-index:1; color:rgba(255,255,255,.35); font:italic 18px "Cormorant Garamond",serif; }
.view { position:absolute; z-index:2; bottom:20px; left:22px; opacity:0; text-transform:uppercase; letter-spacing:.22em; font-size:9px; transition:.4s; }
.card-0 { --photo:linear-gradient(145deg,#71513d,#211a17 58%,#0c0c0c); }.card-1 { --photo:linear-gradient(35deg,#0e0e0e,#674a3a 65%,#aa7b5b); }.card-2 { --photo:linear-gradient(160deg,#aa8b71,#34271f 45%,#090909); }.card-3 { --photo:radial-gradient(circle at 65% 30%,#9b7358,#3e2d24 38%,#101010 70%); }.card-4 { --photo:linear-gradient(120deg,#181818,#86644f,#18120f); }.card-5 { --photo:radial-gradient(ellipse at 30% 20%,#b89173,#3a2a22 52%,#090909); }
.gallery-section>.socials,.consideration>.socials,.about>.socials,.tours>.socials { justify-content:center; }
.consideration { max-width:900px; }
.consideration .section-title,.about .section-title,.tours .section-title { text-align:center; }
.consideration .section-title span,.about .section-title span,.tours .section-title span { margin-left:auto; margin-right:auto; }
.rates-card { border-top:1px solid var(--line); margin-top:70px; }
.rates-card h3,.note h3,.contact h3 { font:italic 300 34px "Cormorant Garamond",serif; color:var(--gold); }
.rate,.fact,.tour-row,.tour-head { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding:24px 12px; }
.rate span,.fact span,.tour-head span { text-transform:uppercase; letter-spacing:.17em; color:#837b76; font-size:10px; }
.rate b,.fact b,.tour-row b { font-weight:300; color:#d6c9c1; font-family:"Cormorant Garamond",serif; font-size:24px; }
.text-link { display:inline-block; margin:48px 0; color:var(--gold); border-bottom:1px solid var(--gold); padding-bottom:5px; font-size:12px; letter-spacing:.08em; }
.note { border:1px solid var(--line); padding:32px 38px; color:#a69d98; line-height:1.8; font-size:13px; }
.about { max-width:1000px; }
.facts { display:grid; grid-template-columns:1fr 1fr; column-gap:60px; }
.fact { align-items:flex-start; gap:28px; }
.fact b { text-align:right; font-size:19px; }
.booking { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
.booking-images { position:relative; min-height:760px; }
.booking-images .portrait { position:absolute; min-height:0; }
.portrait-two { inset:0 20% 20% 0; }
.portrait-three { inset:36% 0 0 44%; border:8px solid var(--bg); }
.contact { margin-top:38px; display:flex; flex-direction:column; gap:11px; }
.contact h3 { margin:0 0 8px; }
.contact a { color:#c7b8ae; font-size:13px; }
.tours { max-width:900px; }
.tour-table { margin-top:70px; }
.tour-head { color:var(--gold); }
.tour-row span { font:italic 28px "Cormorant Garamond",serif; color:var(--gold); }
.tour-row b { font-size:23px; }
footer { min-height:170px; border-top:1px solid rgba(255,255,255,.05); padding:0 6%; display:flex; justify-content:space-between; align-items:center; color:#736b67; font-size:10px; letter-spacing:.1em; }
.lightbox { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.95); display:flex; align-items:center; justify-content:center; }
.lightbox-photo { width:min(70vw,700px); height:min(82vh,860px); position:relative; overflow:hidden; }
.lightbox-photo span { position:absolute; z-index:2; bottom:20px; right:22px; font:italic 24px "Cormorant Garamond",serif; }
.close,.previous,.next { position:absolute; border:0; background:transparent; color:#d6c9c1; cursor:pointer; font:300 48px "Cormorant Garamond",serif; z-index:2; }
.close { top:20px; right:30px; }.previous { left:5%; }.next { right:5%; }
@keyframes breathe { from{transform:scale(1)} to{transform:scale(1.07)} }
@keyframes rise { from{opacity:0;transform:translateY(25px)} to{opacity:1;transform:none} }
.reveal { animation:rise 1.4s ease both; }

@media(max-width:850px){
  .site-header{height:66px;padding:0 22px}.brand{font-size:21px}.menu-button{display:flex;flex-direction:column;gap:7px;border:0;background:none;z-index:2}.menu-button span{display:block;width:25px;height:1px;background:#d4c6bd}nav{position:fixed;inset:0;background:#0a0a0a;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:28px;opacity:0;pointer-events:none;transition:.35s}nav.open{opacity:1;pointer-events:auto}nav a{font-size:13px}.hero-content>p{font-size:10px}.hero-content h3{font-size:12px;padding:0 25px}h1{font-size:92px}.section{padding:110px 24px;min-height:auto}.intro,.booking{grid-template-columns:1fr;gap:55px}.portrait{min-height:580px}.intro article{order:-1}.gallery-grid{columns:2 150px}.gallery-card{height:300px}.gallery-card:nth-child(3n+1){height:390px}.facts{grid-template-columns:1fr}.booking-images{min-height:620px}.rate b{font-size:20px}.tour-row{gap:22px}.tour-row b{text-align:right}footer{padding:45px 24px;flex-direction:column;gap:22px;text-align:center}.lightbox-photo{width:78vw;height:70vh}}
@media(max-width:480px){.gallery-grid{columns:1}.gallery-card,.gallery-card:nth-child(n){height:480px}.booking-images{min-height:500px}.section-title h2{font-size:58px}.rate{padding-left:0;padding-right:0}.note{padding:25px 22px}.tour-row span{font-size:22px}.tour-row b{font-size:19px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-photo,.reveal{animation:none!important}}
/* Gallery cards remain visible by default */
.gallery-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Only hide cards after JavaScript confirms animations are available */
.animations-ready .gallery-card {
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  transition:
    opacity 1.1s ease,
    transform 1.1s ease;
}

.animations-ready .gallery-card.gallery-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Slow image zoom on hover */
.gallery-card::before {
  transition: transform 1.5s ease;
}

.gallery-card:hover::before {
  transform: scale(1.08);
}

.portrait-one {
  background-image: url("images/5.jpg") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}
.portrait-two {
  background-image: url("images/3.jpg") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

.portrait-three {
  background-image: url("images/8.jpg") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

/* Light champagne theme */
:root {
  --bg: #f4efe8;
  --panel: #fffaf4;
  --gold: #a7773e;
  --cream: #3c302b;
  --muted: #786a63;
  --line: rgba(167, 119, 62, 0.24);
}

html,
body {
  background: var(--bg);
  color: var(--cream);
}

body {
  background-image:
    radial-gradient(circle at 8% 18%, rgba(196, 157, 90, 0.10), transparent 30%),
    radial-gradient(circle at 92% 72%, rgba(196, 157, 90, 0.08), transparent 28%);
  font-family: "Montserrat", Arial, sans-serif;
}

.site-header {
  background: rgba(250, 246, 240, 0.90);
  border-bottom: 1px solid rgba(167, 119, 62, 0.14);
  box-shadow: 0 8px 30px rgba(60, 48, 43, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.brand {
  color: #4a382f;
}

nav a {
  color: #6f5e55;
  font-weight: 400;
}

nav a:hover {
  color: var(--gold);
}

.hero-photo {
  opacity: 0.72;
}

.hero-shade {
  background:
    linear-gradient(
      to bottom,
      rgba(29, 22, 19, 0.38),
      rgba(29, 22, 19, 0.18) 55%,
      var(--bg)
    );
}

.hero-content > p {
  color: #e4bd80;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

h1 {
  color: #fff8f1;
  text-shadow: 0 8px 40px rgba(0, 0, 0, 0.48);
}

h1 em {
  color: #e1b875;
}

.hero-content h3,
.discover {
  color: #efe3da;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.60);
}

.section-title h2 {
  color: #49372f;
}

.section-title p {
  color: var(--gold);
  font-weight: 500;
}

.section-title span {
  opacity: 0.75;
}

article p {
  color: #6f625c;
}

article .lead {
  color: #4d3d36;
}

.portrait {
  border-color: rgba(167, 119, 62, 0.28);
  box-shadow: 0 22px 55px rgba(74, 56, 47, 0.16);
}

.portrait::after {
  content: none;
}

.gallery-card {
  background: #d9c9bb;
  border-radius: 3px;
  box-shadow: 0 12px 30px rgba(74, 56, 47, 0.13);
}

.gallery-card::after {
  background: linear-gradient(to top, rgba(34, 24, 20, 0.72), transparent 58%);
}

.socials a {
  background: rgba(255, 250, 244, 0.72);
  border-color: var(--line);
  color: #745f53;
}

.socials a:hover {
  background: #fffaf4;
  box-shadow: 0 8px 20px rgba(74, 56, 47, 0.10);
}

.rates-card,
.tour-table {
  background: rgba(255, 250, 244, 0.66);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px 32px;
  box-shadow: 0 18px 45px rgba(74, 56, 47, 0.07);
}

.rates-card {
  margin-top: 70px;
}

.rates-card h3,
.note h3,
.contact h3 {
  color: var(--gold);
}

.rate,
.fact,
.tour-row,
.tour-head {
  border-bottom-color: var(--line);
}

.rate span,
.fact span,
.tour-head span {
  color: #8a766a;
  font-weight: 500;
}

.rate b,
.fact b,
.tour-row b {
  color: #4d3d36;
}

.tour-message {
  margin: 0;
  padding: 32px 12px;
  color: var(--muted);
  line-height: 1.7;
  text-align: center;
}

.facts {
  background: rgba(255, 250, 244, 0.48);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px 32px;
}

.note {
  background: rgba(255, 250, 244, 0.72);
  border-color: var(--line);
  color: #6f625c;
  box-shadow: 0 18px 45px rgba(74, 56, 47, 0.07);
}

.contact a {
  color: #745f53;
}

.portrait-three {
  border-color: var(--bg);
}

footer {
  background: rgba(255, 250, 244, 0.60);
  border-top-color: var(--line);
  color: #806f66;
}

.lightbox {
  background: rgba(31, 24, 21, 0.96);
}

@media (max-width: 850px) {
  .menu-button span {
    background: #4a382f;
  }

  nav {
    background: rgba(250, 246, 240, 0.98);
  }

  nav a {
    color: #4d3d36;
  }

  .rates-card,
  .tour-table,
  .facts {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* Full screen hero slideshow */
.hero-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #2f241f;
}

.hero-slide {
  position: absolute;
  inset: -3%;
  opacity: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: opacity 2.2s ease;
  will-change: opacity, transform;
}

.hero-slide.active {
  opacity: 1;
  animation: heroSlideZoom 9s ease-out forwards;
}

.hero-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(30, 22, 19, 0.22), transparent 50%, rgba(30, 22, 19, 0.16)),
    linear-gradient(to bottom, rgba(24, 18, 16, 0.14), rgba(24, 18, 16, 0.04) 48%, rgba(24, 18, 16, 0.25));
}

@keyframes heroSlideZoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.09);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: none;
    animation: none !important;
  }
}

/* Mobile navigation stacking fix */
.hero-slider,
.hero-shade {
  pointer-events: none;
}

.hero-slider {
  z-index: 0;
}

.hero-shade {
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.discover {
  z-index: 2;
}

.site-header {
  z-index: 1000;
}

body.menu-open {
  overflow: hidden;
}

@media (max-width: 850px) {
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
    transition: height 0.35s ease, background-color 0.35s ease;
  }

  .site-header.menu-open {
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    background: #f8f3ec;
    overflow: hidden;
  }

  .site-header .brand {
    position: absolute;
    top: 20px;
    left: 22px;
    z-index: 1002;
  }

  .menu-button {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 1003;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
  }

  .menu-button span {
    position: absolute;
    transition: transform 0.3s ease;
  }

  .menu-button span:first-child {
    transform: translateY(-4px);
  }

  .menu-button span:last-child {
    transform: translateY(4px);
  }

  .menu-button.open span:first-child {
    transform: rotate(45deg);
  }

  .menu-button.open span:last-child {
    transform: rotate(-45deg);
  }

  .site-header nav {
    position: absolute;
    z-index: 1001;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 100px 24px 50px;
    background: #f8f3ec;
    justify-content: center;
    gap: 34px;
    visibility: hidden;
  }

  .site-header nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .site-header nav a {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.24em;
    color: #4d3d36;
  }

  .site-header.menu-open .brand {
    color: #4a382f;
  }

  .site-header.menu-open .menu-button span {
    background: #4a382f;
  }
}