:root{
  --paper:#f5f1e9;
  --cream:#fbf9f5;
  --ink:#211d19;
  --muted:#746f68;
  --gold:#b28a58;
  --line:#ddd5c9;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
}

a{
  color:inherit;
  text-decoration:none;
}

h1,
h2,
h3,
p{
  margin-top:0;
}

h1,
h2,
h3{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
}

em{
  font-style:italic;
  color:#9a774f;
}


/* =========================
   HEADER
========================= */

.topbar{
  position:absolute;
  z-index:10;
  top:0;
  left:0;
  right:0;
  padding:32px 6vw;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  color:#fff;
}

.wordmark{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:700;
  font-size:21px;
  line-height:1.75;
  letter-spacing:.035em;
  display:flex;
  flex-direction:column;
}

.menu{
  display:flex;
  gap:38px;
  padding-top:22px;
  font-size:14px;
  font-weight:600;
}

.menu a{
  opacity:.96;
  transition:opacity .2s ease;
}

.menu a:hover{
  opacity:.7;
}

.menu-toggle{
  display:none;
  background:transparent;
  border:0;
  color:#fff;
  font-size:25px;
  cursor:pointer;
}


/* =========================
   HERO
========================= */

.hero{
  position:relative;
  height:100vh;
  min-height:720px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#888;
}

.hero>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-wash{
  position:absolute;
  inset:0;
  background:rgba(70,69,67,.56);
}

.hero-center{
  position:relative;
  z-index:2;
  color:white;
  text-align:center;
  margin-top:45px;
  padding:0 20px;
}

.eyebrow,
.section-label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.26em;
}

.hero h1{
  font-size:clamp(64px,7vw,105px);
  line-height:1.03;
  margin:18px 0 22px;
  letter-spacing:-.035em;
}

.tagline{
  font-size:18px;
  font-weight:600;
  letter-spacing:.025em;
  margin-bottom:36px;
}

.actions{
  display:flex;
  justify-content:center;
  gap:14px;
}

.btn{
  padding:17px 28px;
  min-width:188px;
  font-size:14px;
  font-weight:600;
  border-radius:2px;
  transition:all .25s ease;
}

.btn-gold{
  background:var(--gold);
  color:#fff;
}

.btn-gold:hover{
  background:#9d7749;
  transform:translateY(-2px);
}

.btn-light{
  background:#fff;
  color:#3e372f;
}

.btn-light:hover{
  background:#f0ebe3;
  transform:translateY(-2px);
}

.down{
  position:absolute;
  bottom:24px;
  z-index:2;
  color:white;
  font-size:30px;
  opacity:.75;
}


/* =========================
   GENERAL SECTIONS
========================= */

.section{
  padding:105px 7vw;
}

.about{
  background:var(--cream);
}

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9vw;
  margin-top:25px;
}

.split h2,
.section-head h2,
.booking-copy h2{
  font-size:clamp(48px,5.2vw,78px);
  line-height:1.02;
  letter-spacing:-.035em;
  margin:0;
}

.split>div:last-child{
  padding-top:15px;
}

.split p,
.section-head>p{
  font-size:16px;
  line-height:1.85;
  color:var(--muted);
}

.muted{
  background:var(--paper);
}

.section-head{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:9vw;
  align-items:end;
  margin-bottom:46px;
}


/* =========================
   ROOMS
========================= */

.room-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.room-card{
  height:560px;
  position:relative;
  overflow:hidden;
  background:#ddd;
}

.room-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s;
}

.room-card:hover img{
  transform:scale(1.025);
}

.shade{
  position:absolute;
  inset:0;
  background:linear-gradient(
    0deg,
    rgba(24,20,18,.78),
    transparent 62%
  );
}

.room-copy{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:30px;
  color:#fff;
}

.room-copy span{
  font-size:10px;
  letter-spacing:.18em;
  font-weight:700;
  color:#e6c79f;
}

.room-copy h3{
  font-size:36px;
  margin:8px 0 18px;
}

.room-copy a{
  font-size:13px;
  font-weight:700;
  transition:color .2s ease;
}

.room-copy a:hover{
  color:#e6c79f;
}


/* =========================
   GALLERY
========================= */

.gallery-band{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  min-height:600px;
}

.gallery-item{
  position:relative;
  overflow:hidden;
  min-height:480px;
}

.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
  transition:transform .5s;
}

.gallery-item:hover img{
  transform:scale(1.02);
}

.gallery-item:after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    0deg,
    rgba(28,23,20,.72),
    transparent 60%
  );
}

.gallery-item>div{
  position:absolute;
  z-index:2;
  left:28px;
  bottom:28px;
  color:#fff;
}

.gallery-item span{
  font-size:10px;
  letter-spacing:.22em;
  font-weight:700;
}

.gallery-item h3{
  font-size:31px;
  margin:8px 0 0;
}


/* =========================
   CAPPADOCIA
========================= */

.cappadocia{
  height:82vh;
  min-height:650px;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.cappadocia>img{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
}

.cappa-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(27,23,20,.76),
    rgba(27,23,20,.12) 75%
  );
}

.cappa-copy{
  position:relative;
  z-index:2;
  color:#fff;
  margin-left:7vw;
  max-width:720px;
}

.light{
  color:#ead4b5;
}

.cappa-copy h2{
  font-size:clamp(50px,5.8vw,86px);
  line-height:1.02;
  letter-spacing:-.04em;
  margin:16px 0 22px;
}

.cappa-copy em{
  color:#e3bd8c;
}

.cappa-copy p{
  font-size:16px;
  line-height:1.85;
  color:rgba(255,255,255,.8);
  max-width:620px;
}


/* =========================
   BOOKING / CONTACT
========================= */

.booking{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8vw;
  background:#2c2621;
  color:white;
  align-items:center;
}

.booking-copy{
  display:flex;
  flex-direction:column;
}

.booking-copy h2{
  font-size:clamp(48px,5.2vw,78px);
  line-height:1.02;
  letter-spacing:-.035em;
  margin:0;
}

.booking em{
  color:#d6b58b;
}


/* =========================
   CONTACT ICONS
========================= */

.booking-contact{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}

.contact-title{
  margin:0 0 22px;
  color:#c8c0b8;
  font-size:13px;
  letter-spacing:.08em;
}

.booking-icons{
  display:flex;
  gap:16px;
}

.booking-icon{
  width:180px;
  height:125px;
  border:1px solid rgba(255,255,255,.18);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:13px;
  transition:all .3s ease;
}

.booking-icon svg{
  width:32px;
  height:32px;
  fill:currentColor;
}

.booking-icon span{
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
}


/* WhatsApp */

.booking-icon.whatsapp{
  color:#25D366;
}

.booking-icon.whatsapp:hover{
  background:#25D366;
  border-color:#25D366;
  color:#fff;
  transform:translateY(-5px);
}


/* E-mail */

.booking-icon.email{
  color:#e8e0d7;
}

.booking-icon.email:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:#fff;
  transform:translateY(-5px);
}


/* =========================
   FOOTER
========================= */

footer{
  background:#171411;
  color:white;
  padding:46px 7vw;
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  align-items:center;
  gap:30px;
  font-size:13px;
}

.footer-logo{
  font-family:Georgia,'Times New Roman',serif;
  display:flex;
  flex-direction:column;
  gap:7px;
  letter-spacing:.08em;
}

.footer-logo strong{
  font-size:17px;
}

.footer-logo span{
  font-size:12px;
}

.footer-contact{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.footer-contact p{
  margin:0;
  color:#aaa39c;
}

.footer-small-icons{
  display:flex;
  gap:20px;
}

.footer-small-icons a{
  color:#aaa39c;
  transition:color .2s ease;
}

.footer-small-icons a:hover{
  color:#d6b58b;
}

.footer-links{
  display:flex;
  gap:22px;
  justify-content:flex-end;
}

.footer-links a{
  transition:color .2s ease;
}

.footer-links a:hover{
  color:#d6b58b;
}


/* =========================
   MOBILE
========================= */

@media(max-width:820px){

  .topbar{
    padding:22px;
  }

  .wordmark{
    font-size:16px;
  }

  .menu-toggle{
    display:block;
    cursor:pointer;
  }

  .menu{
    display:none;
    position:absolute;
    right:20px;
    top:70px;
    background:rgba(30,27,25,.96);
    padding:22px;
    flex-direction:column;
    gap:18px;
    min-width:170px;
  }

  .menu.open{
    display:flex;
  }


  /* HERO */

  .hero{
    min-height:650px;
  }

  .hero h1{
    font-size:54px;
  }

  .tagline{
    font-size:15px;
  }

  .actions{
    flex-direction:column;
    align-items:center;
  }

  .btn{
    width:220px;
  }


  /* SECTIONS */

  .section{
    padding:76px 24px;
  }

  .split,
  .section-head{
    grid-template-columns:1fr;
  }

  .split{
    gap:36px;
  }


  /* ROOMS */

  .room-grid{
    grid-template-columns:1fr;
  }

  .room-card{
    height:470px;
  }


  /* GALLERY */

  .gallery-band{
    grid-template-columns:1fr;
  }

  .gallery-item{
    min-height:420px;
  }


  /* CAPPADOCIA */

  .cappa-copy{
    margin:0 24px;
  }


  /* BOOKING */

  .booking{
    grid-template-columns:1fr;
    gap:45px;
  }

  .booking-copy h2{
    font-size:clamp(44px,11vw,62px);
  }

  .booking-contact{
    align-items:flex-start;
  }

  .booking-icons{
    width:100%;
    gap:12px;
  }

  .booking-icon{
    flex:1;
    width:auto;
    height:115px;
  }


  /* FOOTER */

  footer{
    grid-template-columns:1fr;
    gap:28px;
    padding:42px 24px;
  }

  .footer-links{
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:18px;
  }

}