/*
THE MESKI KITCHEN
HA LONG BAY, LIKE FAMILY

Editorial direction:
- Vietnam, water, wood, steam, night on the bay
- warm hospitality rather than travel-guide styling
- blue-green bay tones + amber dining light
- personal story first
*/

#meski-kitchen-ha-long-bay.ha-long-bay-page{
  --hlb-ivory:#f5f1e8;
  --hlb-paper:#faf7f0;
  --hlb-mist:#dfe6df;
  --hlb-water:#cfdcd7;
  --hlb-ink:#181714;
  --hlb-brown:#65594d;
  --hlb-green:#16281e;
  --hlb-green-deep:#07150f;
  --hlb-teal:#25453f;
  --hlb-gold:#c3a04e;
  --hlb-gold-soft:#e8d18f;
  --hlb-amber:#b56f2f;
  --hlb-line:rgba(96,116,104,.20);
  --hlb-max:1440px;

  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  overflow:hidden;
  background:var(--hlb-ivory);
  color:var(--hlb-ink);
  font-family:"Jost",Arial,sans-serif;
}

#meski-kitchen-ha-long-bay,
#meski-kitchen-ha-long-bay *{box-sizing:border-box}

#meski-kitchen-ha-long-bay img{
  display:block;
  width:100%;
  height:auto;
}

#meski-kitchen-ha-long-bay figure{margin:0}

#meski-kitchen-ha-long-bay .ha-long-bay-wide{
  width:min(calc(100% - 72px),var(--hlb-max));
  margin-inline:auto;
}

#meski-kitchen-ha-long-bay .ha-long-bay-reading{
  width:min(calc(100% - 44px),900px);
  margin-inline:auto;
}

#meski-kitchen-ha-long-bay .ha-long-bay-kicker,
#meski-kitchen-ha-long-bay .ha-long-bay-eyebrow{
  margin:0 0 16px;
  color:var(--hlb-gold);
  font-size:10px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.18em;
  text-transform:uppercase;
}

#meski-kitchen-ha-long-bay h1,
#meski-kitchen-ha-long-bay h2,
#meski-kitchen-ha-long-bay blockquote{
  font-family:"Bodoni Moda",Georgia,serif;
}

#meski-kitchen-ha-long-bay h2{
  margin:0 0 34px;
  color:var(--hlb-green);
  font-size:clamp(47px,5vw,76px);
  font-weight:500;
  line-height:1;
  letter-spacing:-.04em;
}

#meski-kitchen-ha-long-bay p{text-wrap:pretty}

#meski-kitchen-ha-long-bay .ha-long-bay-opening__copy p,
#meski-kitchen-ha-long-bay .ha-long-bay-boat__copy p,
#meski-kitchen-ha-long-bay .ha-long-bay-dinner__copy p,
#meski-kitchen-ha-long-bay .ha-long-bay-sharing__copy p,
#meski-kitchen-ha-long-bay .ha-long-bay-language p,
#meski-kitchen-ha-long-bay .ha-long-bay-karaoke__copy p,
#meski-kitchen-ha-long-bay .ha-long-bay-breakfast__copy p,
#meski-kitchen-ha-long-bay .ha-long-bay-mistake p,
#meski-kitchen-ha-long-bay .ha-long-bay-faith__copy p{
  margin:0 0 22px;
  color:var(--hlb-brown);
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:20px;
  line-height:1.78;
}

#meski-kitchen-ha-long-bay .ha-long-bay-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  box-shadow:0 24px 62px rgba(28,29,23,.11);
}


/* HERO */

#meski-kitchen-ha-long-bay .ha-long-bay-hero{
  position:relative;
  min-height:700px;
  display:flex;
  isolation:isolate;
  color:#fffaf0;
  background:var(--hlb-hero) center/cover no-repeat,var(--hlb-green-deep);
}

#meski-kitchen-ha-long-bay .ha-long-bay-hero__veil{
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    linear-gradient(90deg,rgba(4,13,10,.95) 0%,rgba(8,18,15,.76) 35%,rgba(15,33,29,.20) 67%,rgba(9,21,20,.04) 100%),
    linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.42));
}

#meski-kitchen-ha-long-bay .ha-long-bay-hero__inner{
  min-height:700px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:84px 0;
}

#meski-kitchen-ha-long-bay .ha-long-bay-hero h1{
  max-width:1000px;
  margin:0 0 31px;
  color:#fffaf0;
  font-size:clamp(74px,8.1vw,124px);
  font-weight:500;
  line-height:.86;
  letter-spacing:-.055em;
}

#meski-kitchen-ha-long-bay .ha-long-bay-hero__line{
  max-width:760px;
  margin:0 0 22px;
  color:rgba(255,250,240,.96);
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:clamp(29px,3vw,43px);
  font-style:italic;
  line-height:1.35;
}

#meski-kitchen-ha-long-bay .ha-long-bay-hero__note{
  max-width:650px;
  margin:0;
  color:rgba(255,250,240,.72);
  font-size:14px;
  line-height:1.85;
}


/* OPENING */

#meski-kitchen-ha-long-bay .ha-long-bay-opening{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(66px,8vw,132px);
  align-items:center;
  padding:clamp(118px,12vw,184px) 0;
}

#meski-kitchen-ha-long-bay .ha-long-bay-photo--hanoi img{
  aspect-ratio:4/5;
}


/* BOAT */

#meski-kitchen-ha-long-bay .ha-long-bay-boat{
  padding:clamp(114px,11vw,176px) 0;
  background:linear-gradient(180deg,var(--hlb-mist),var(--hlb-water));
  border-top:1px solid var(--hlb-line);
  border-bottom:1px solid var(--hlb-line);
}

#meski-kitchen-ha-long-bay .ha-long-bay-boat__grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(66px,8vw,132px);
  align-items:center;
}

#meski-kitchen-ha-long-bay .ha-long-bay-photo--bay img{
  aspect-ratio:3/2;
}

#meski-kitchen-ha-long-bay .ha-long-bay-boat__lead,
#meski-kitchen-ha-long-bay .ha-long-bay-dinner__lead,
#meski-kitchen-ha-long-bay .ha-long-bay-sharing__lead,
#meski-kitchen-ha-long-bay .ha-long-bay-faith__lead{
  margin-top:34px!important;
  color:var(--hlb-green)!important;
  font-size:clamp(30px,2.9vw,42px)!important;
  font-style:italic;
  line-height:1.42!important;
}


/* DINNER */

#meski-kitchen-ha-long-bay .ha-long-bay-dinner{
  padding:clamp(118px,12vw,184px) 0;
  background:var(--hlb-paper);
}

#meski-kitchen-ha-long-bay .ha-long-bay-dinner__grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(66px,8vw,132px);
  align-items:center;
}

#meski-kitchen-ha-long-bay .ha-long-bay-photo--family img{
  aspect-ratio:4/5;
}


/* QUOTE */

#meski-kitchen-ha-long-bay .ha-long-bay-quote{
  padding:clamp(96px,9vw,140px) 0;
  background:
    radial-gradient(circle at 50% 20%,rgba(232,209,143,.08),transparent 32%),
    var(--hlb-green-deep);
}

#meski-kitchen-ha-long-bay .ha-long-bay-quote blockquote{
  margin:0;
  padding:0;
  border:0;
  color:#fffaf0;
  font-size:clamp(44px,5.2vw,78px);
  font-style:italic;
  line-height:1.22;
  text-align:center;
}


/* SHARING */

#meski-kitchen-ha-long-bay .ha-long-bay-sharing{
  padding:clamp(118px,12vw,184px) 0;
  background:#efe5d5;
}

#meski-kitchen-ha-long-bay .ha-long-bay-sharing__grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(66px,8vw,132px);
  align-items:center;
}

#meski-kitchen-ha-long-bay .ha-long-bay-photo--food img{
  aspect-ratio:4/5;
}


/* LANGUAGE */

#meski-kitchen-ha-long-bay .ha-long-bay-language{
  padding:clamp(100px,10vw,150px) 0;
  background:var(--hlb-ivory);
  text-align:center;
}

#meski-kitchen-ha-long-bay .ha-long-bay-language h2{
  font-size:clamp(45px,5vw,72px);
}

#meski-kitchen-ha-long-bay .ha-long-bay-language p{
  font-size:clamp(20px,2vw,25px);
}

#meski-kitchen-ha-long-bay .ha-long-bay-language__statement{
  margin-top:34px!important;
  color:var(--hlb-teal)!important;
  font-size:clamp(35px,3.5vw,50px)!important;
  font-style:italic;
}


/* KARAOKE */

#meski-kitchen-ha-long-bay .ha-long-bay-karaoke{
  padding:clamp(118px,12vw,184px) 0;
  background:var(--hlb-paper);
}

#meski-kitchen-ha-long-bay .ha-long-bay-karaoke__grid{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(66px,8vw,132px);
  align-items:center;
}

#meski-kitchen-ha-long-bay .ha-long-bay-photo--night img{
  aspect-ratio:3/2;
}


/* BREAKFAST */

#meski-kitchen-ha-long-bay .ha-long-bay-breakfast{
  padding:clamp(118px,12vw,184px) 0;
  background:linear-gradient(180deg,#e9efeb,#dfe8e3);
}

#meski-kitchen-ha-long-bay .ha-long-bay-breakfast__grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(66px,8vw,132px);
  align-items:center;
}

#meski-kitchen-ha-long-bay .ha-long-bay-photo--breakfast img{
  aspect-ratio:4/5;
}


/* MISTAKE */

#meski-kitchen-ha-long-bay .ha-long-bay-mistake{
  padding:clamp(100px,10vw,150px) 0;
  background:var(--hlb-ivory);
  text-align:center;
}

#meski-kitchen-ha-long-bay .ha-long-bay-mistake p{
  font-size:clamp(20px,2vw,25px);
}

#meski-kitchen-ha-long-bay .ha-long-bay-mistake__statement{
  margin-top:34px!important;
  color:var(--hlb-green)!important;
  font-size:clamp(36px,3.6vw,52px)!important;
  font-style:italic;
}


/* FAITH */

#meski-kitchen-ha-long-bay .ha-long-bay-faith{
  padding:clamp(122px,12vw,190px) 0;
  background:#ece2d2;
}

#meski-kitchen-ha-long-bay .ha-long-bay-faith__grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(66px,8vw,132px);
  align-items:center;
}

#meski-kitchen-ha-long-bay .ha-long-bay-photo--bay-final img{
  aspect-ratio:4/5;
}


/* ENDING */

#meski-kitchen-ha-long-bay .ha-long-bay-ending{
  padding:clamp(112px,12vw,172px) 0;
  background:var(--hlb-green-deep);
  text-align:center;
}

#meski-kitchen-ha-long-bay .ha-long-bay-ending__small{
  margin:0 0 24px;
  color:var(--hlb-gold);
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

#meski-kitchen-ha-long-bay .ha-long-bay-ending__line{
  margin:0;
  color:#fffaf0;
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:clamp(39px,4.8vw,66px);
  font-style:italic;
  line-height:1.3;
}

#meski-kitchen-ha-long-bay .ha-long-bay-cta{
  display:inline-flex;
  align-items:center;
  gap:28px;
  margin-top:54px;
  padding:16px 24px;
  border:1px solid var(--hlb-gold);
  color:#fffaf0!important;
  font-size:10px;
  font-weight:700;
  line-height:1;
  letter-spacing:.13em;
  text-decoration:none!important;
  text-transform:uppercase;
  transition:background .2s ease,color .2s ease;
}

#meski-kitchen-ha-long-bay .ha-long-bay-cta:hover,
#meski-kitchen-ha-long-bay .ha-long-bay-cta:focus{
  background:var(--hlb-gold);
  color:var(--hlb-green-deep)!important;
}


/* RESPONSIVE */

@media(max-width:1050px){
  #meski-kitchen-ha-long-bay .ha-long-bay-opening,
  #meski-kitchen-ha-long-bay .ha-long-bay-boat__grid,
  #meski-kitchen-ha-long-bay .ha-long-bay-dinner__grid,
  #meski-kitchen-ha-long-bay .ha-long-bay-sharing__grid,
  #meski-kitchen-ha-long-bay .ha-long-bay-karaoke__grid,
  #meski-kitchen-ha-long-bay .ha-long-bay-breakfast__grid,
  #meski-kitchen-ha-long-bay .ha-long-bay-faith__grid{
    grid-template-columns:1fr;
  }

  #meski-kitchen-ha-long-bay .ha-long-bay-photo{
    width:72%;
    margin-inline:auto;
  }
}

@media(max-width:720px){
  #meski-kitchen-ha-long-bay .ha-long-bay-wide{
    width:calc(100% - 30px);
  }

  #meski-kitchen-ha-long-bay .ha-long-bay-reading{
    width:calc(100% - 34px);
  }

  #meski-kitchen-ha-long-bay .ha-long-bay-hero,
  #meski-kitchen-ha-long-bay .ha-long-bay-hero__inner{
    min-height:680px;
  }

  #meski-kitchen-ha-long-bay .ha-long-bay-hero{
    background-position:58% center;
  }

  #meski-kitchen-ha-long-bay .ha-long-bay-hero h1{
    font-size:clamp(61px,16vw,86px);
  }

  #meski-kitchen-ha-long-bay .ha-long-bay-photo{
    width:100%;
  }
}