/* =========================================
   NISEKO DESTINATION PAGE
========================================= */


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

.niseko-hero{
  position:relative;

  min-height:78vh;

  display:flex;
  align-items:flex-end;

  overflow:hidden;

  padding:180px 8% 110px;

  isolation:isolate;
}

.niseko-hero img{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  z-index:-2;
}

.niseko-hero-overlay{
  position:absolute;

  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.68),
      rgba(0,0,0,.18) 65%,
      rgba(0,0,0,.08)
    );

  z-index:-1;
}

.niseko-hero-content{
  width:100%;
  max-width:1200px;

  margin:0 auto;

  color:#fff;
}

.niseko-hero h1{
  font-family:'Cormorant Garamond', serif;

  font-size:clamp(5rem,11vw,10rem);

  font-weight:300;

  line-height:.82;

  margin:20px 0 25px;

  text-shadow:
    0 12px 35px rgba(0,0,0,.3);
}

.niseko-hero-subtitle{
  max-width:620px;

  font-size:20px;

  line-height:1.7;

  color:rgba(255,255,255,.88);
}


/* =========================================
   INTRO
========================================= */

.niseko-intro{
  padding:130px 8%;
}

.niseko-intro-inner{
  max-width:900px;

  margin:0 auto;
}

.niseko-intro h2,
.niseko-feature h2,
.niseko-history h2,
.niseko-food h2,
.niseko-guide h2,
.niseko-experiences h2,
.niseko-cta h2{

  font-family:'Cormorant Garamond', serif;

  font-size:clamp(3rem,6vw,6rem);

  font-weight:300;

  line-height:.95;

  margin:20px 0 45px;
}

.niseko-intro p{
  max-width:780px;

  font-size:17px;

  line-height:2;

  color:#555;
}

.niseko-intro .lead{
  font-size:23px;

  line-height:1.8;

  color:#222;

  margin-bottom:30px;
}


/* =========================================
   FEATURE SECTIONS
========================================= */

.niseko-feature{
  display:grid;

  grid-template-columns:1fr 1fr;

  min-height:650px;

  background:#f5f1ea;
}

.niseko-feature-reverse{
  direction:rtl;
}

.niseko-feature-reverse > *{
  direction:ltr;
}

.niseko-feature-image{
  min-height:600px;

  overflow:hidden;
}

.niseko-feature-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;
}

.niseko-feature-content{
  align-self:center;

  padding:90px 10%;

  max-width:720px;
}

.niseko-feature-content p{
  font-size:16px;

  line-height:2;

  color:#555;

  margin-bottom:24px;
}


/* =========================================
   HISTORY
========================================= */

.niseko-history{
  padding:140px 8%;

  background:#fff;
}

.niseko-history-inner{
  max-width:1200px;

  margin:0 auto;
}

.niseko-history-grid{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:90px;
}

.niseko-history-grid p{
  font-size:16px;

  line-height:2;

  color:#555;

  margin-bottom:28px;
}


/* =========================================
   FOOD
========================================= */

.niseko-food{
  padding:140px 8%;

  background:#f5f1ea;
}

.niseko-food-heading{
  max-width:850px;

  margin:0 auto 80px;
}

.niseko-food-heading p{
  max-width:720px;

  font-size:17px;

  line-height:2;

  color:#555;
}

.niseko-food-grid{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:30px;

  max-width:1300px;

  margin:0 auto;
}

.niseko-food-card{
  background:#fff;

  padding-bottom:35px;

  overflow:hidden;

  border-radius:18px;
}

.food-card-image{
  width:100%;

  aspect-ratio:4/3;

  overflow:hidden;
}

.food-card-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  transition:transform .8s ease;
}

.niseko-food-card:hover img{
  transform:scale(1.03);
}

.niseko-food-card h3{
  font-family:'Cormorant Garamond', serif;

  font-size:34px;

  font-weight:400;

  margin:30px 35px 15px;
}

.niseko-food-card p{
  font-size:15px;

  line-height:1.9;

  color:#555;

  margin:0 35px;
}


/* =========================================
   GUIDE PERSPECTIVE
========================================= */

.niseko-guide{
  padding:150px 8%;

  background:#1b1b1b;

  color:#fff;
}

.niseko-guide-inner{
  max-width:850px;

  margin:0 auto;
}

.niseko-guide h2{
  color:#fff;
}

.niseko-guide p{
  font-size:17px;

  line-height:2;

  color:rgba(255,255,255,.75);

  margin-bottom:28px;
}


/* =========================================
   EXPERIENCES
========================================= */

.niseko-experiences{
  padding:140px 8%;
}

.niseko-experiences-heading{
  max-width:850px;

  margin:0 auto 80px;
}

.niseko-experiences-grid{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:30px;

  max-width:1300px;

  margin:0 auto;
}

.niseko-experiences-grid article{
  border-top:1px solid #ccc;

  padding-top:28px;
}

.experience-number{
  display:block;

  font-size:12px;

  letter-spacing:.15em;

  color:#888;

  margin-bottom:35px;
}

.niseko-experiences-grid h3{
  font-family:'Cormorant Garamond', serif;

  font-size:32px;

  font-weight:400;

  line-height:1;

  margin-bottom:20px;
}

.niseko-experiences-grid p{
  font-size:15px;

  line-height:1.9;

  color:#555;
}


/* =========================================
   CTA
========================================= */

.niseko-cta{
  padding:150px 8%;

  background:#f5f1ea;

  text-align:center;
}

.niseko-cta-inner{
  max-width:800px;

  margin:0 auto;
}

.niseko-cta h2{
  margin-bottom:30px;
}

.niseko-cta p{
  max-width:650px;

  margin:0 auto 40px;

  font-size:17px;

  line-height:1.9;

  color:#555;
}

.niseko-button{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  padding:17px 32px;

  border:1px solid #111;

  border-radius:999px;

  color:#111;

  text-decoration:none;

  font-size:12px;

  letter-spacing:.16em;

  text-transform:uppercase;

  transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease;
}

.niseko-button:hover{
  background:#111;

  color:#fff;

  transform:translateY(-2px);
}


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

@media(max-width:900px){

  .niseko-hero{
    min-height:72vh;

    padding:160px 24px 80px;
  }

  .niseko-hero h1{
    font-size:72px;
  }

  .niseko-hero-subtitle{
    font-size:17px;
  }


  .niseko-intro,
  .niseko-history,
  .niseko-food,
  .niseko-guide,
  .niseko-experiences,
  .niseko-cta{
    padding:90px 24px;
  }

  .niseko-intro h2,
  .niseko-feature h2,
  .niseko-history h2,
  .niseko-food h2,
  .niseko-guide h2,
  .niseko-experiences h2,
  .niseko-cta h2{
    font-size:52px;
  }

  .niseko-intro .lead{
    font-size:19px;
  }


  .niseko-feature{
    grid-template-columns:1fr;
  }

  .niseko-feature-reverse{
    direction:ltr;
  }

  .niseko-feature-image{
    min-height:400px;
  }

  .niseko-feature-content{
    padding:70px 24px;
  }


  .niseko-history-grid{
    grid-template-columns:1fr;

    gap:20px;
  }


  .niseko-food-grid{
    grid-template-columns:1fr;

    gap:25px;
  }


  .niseko-experiences-grid{
    grid-template-columns:1fr;

    gap:45px;
  }

}


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

@media(max-width:500px){

  .niseko-hero h1{
    font-size:62px;
  }

  .niseko-hero-subtitle{
    font-size:16px;
  }

  .niseko-intro h2,
  .niseko-feature h2,
  .niseko-history h2,
  .niseko-food h2,
  .niseko-guide h2,
  .niseko-experiences h2,
  .niseko-cta h2{
    font-size:46px;
  }

}