/*
THE MESKI KITCHEN
ARABIC MIRROR
ZAMITA ALA TARIQATI

Arabic editorial direction:
- independent Arabic prose, not literal translation
- humour adapted to Arabic rhythm
- generous line-height and paragraph rhythm
- warm roasted grain / honey / Meski green palette
*/

#meski-kitchen-ma-zamita-ar.ma-zamita-ar-page{
  --mza-ivory:#f7f2e8;
  --mza-paper:#fbf8f1;
  --mza-roast:#eadcc7;
  --mza-roast-deep:#d9c4a4;
  --mza-ink:#1a1713;
  --mza-brown:#675a4d;
  --mza-green:#16281e;
  --mza-green-deep:#08170f;
  --mza-gold:#c3a04e;
  --mza-gold-soft:#e7d191;
  --mza-honey:#b5782e;
  --mza-line:rgba(155,111,55,.20);
  --mza-max:1440px;

  direction:rtl;
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  overflow:hidden;
  background:var(--mza-ivory);
  color:var(--mza-ink);
  font-family:"Amiri","Noto Naskh Arabic",serif;
  text-align:right;
}

#meski-kitchen-ma-zamita-ar,
#meski-kitchen-ma-zamita-ar *{box-sizing:border-box}

#meski-kitchen-ma-zamita-ar img{
  display:block;
  width:100%;
  height:auto;
}

#meski-kitchen-ma-zamita-ar figure{margin:0}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-wide{
  width:min(calc(100% - 72px),var(--mza-max));
  margin-inline:auto;
}

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

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-kicker,
#meski-kitchen-ma-zamita-ar .ma-zamita-ar-eyebrow{
  margin:0 0 17px;
  color:var(--mza-gold);
  font-family:"IBM Plex Sans Arabic","Noto Sans Arabic",Arial,sans-serif;
  font-size:10px;
  font-weight:700;
  line-height:1.55;
}

#meski-kitchen-ma-zamita-ar h1,
#meski-kitchen-ma-zamita-ar h2,
#meski-kitchen-ma-zamita-ar blockquote{
  font-family:"Amiri","Noto Naskh Arabic",serif;
}

#meski-kitchen-ma-zamita-ar h2{
  margin:0 0 34px;
  color:var(--mza-green);
  font-size:clamp(50px,5vw,78px);
  font-weight:500;
  line-height:1.18;
}

#meski-kitchen-ma-zamita-ar p{text-wrap:pretty}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-opening__copy p,
#meski-kitchen-ma-zamita-ar .ma-zamita-ar-memory__copy p,
#meski-kitchen-ma-zamita-ar .ma-zamita-ar-texture__copy p,
#meski-kitchen-ma-zamita-ar .ma-zamita-ar-absence__copy p,
#meski-kitchen-ma-zamita-ar .ma-zamita-ar-return__copy p,
#meski-kitchen-ma-zamita-ar .ma-zamita-ar-secret__copy p,
#meski-kitchen-ma-zamita-ar .ma-zamita-ar-honey__copy p,
#meski-kitchen-ma-zamita-ar .ma-zamita-ar-final__copy p{
  margin:0 0 22px;
  color:var(--mza-brown);
  font-size:20px;
  line-height:2;
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  box-shadow:0 24px 62px rgba(37,24,12,.11);
}


/* HERO */

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-hero{
  position:relative;
  min-height:670px;
  display:flex;
  isolation:isolate;
  color:#fffaf0;
  background:var(--mza-hero) center/cover no-repeat,var(--mza-green-deep);
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-hero__veil{
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    linear-gradient(270deg,rgba(7,13,9,.95) 0%,rgba(11,17,11,.77) 34%,rgba(56,35,15,.18) 68%,rgba(24,14,8,.05) 100%),
    linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.38));
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-hero__inner{
  min-height:670px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding-top:82px;
  padding-bottom:82px;
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-hero h1{
  max-width:950px;
  margin:0 0 31px;
  color:#fffaf0;
  font-size:clamp(82px,8.7vw,136px);
  font-weight:500;
  line-height:1;
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-hero__line{
  max-width:760px;
  margin:0 0 22px;
  color:rgba(255,250,240,.96);
  font-size:clamp(31px,3vw,45px);
  line-height:1.6;
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-hero__note{
  max-width:670px;
  margin:0;
  color:rgba(255,250,240,.72);
  font-family:"IBM Plex Sans Arabic","Noto Sans Arabic",Arial,sans-serif;
  font-size:14px;
  line-height:2;
}


/* OPENING */

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-opening{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(66px,8vw,132px);
  align-items:center;
  padding-top:clamp(116px,12vw,182px);
  padding-bottom:clamp(116px,12vw,182px);
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--plate img{
  aspect-ratio:4/5;
}


/* MEMORY */

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-memory{
  padding:clamp(112px,11vw,172px) 0;
  background:var(--mza-roast);
  border-top:1px solid var(--mza-line);
  border-bottom:1px solid var(--mza-line);
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-memory__grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(66px,8vw,132px);
  align-items:center;
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--hands img{
  aspect-ratio:3/2;
}


/* TEXTURE */

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-texture{
  width:min(calc(100% - 72px),var(--mza-max));
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(66px,8vw,132px);
  align-items:center;
  padding-top:clamp(118px,12vw,184px);
  padding-bottom:clamp(118px,12vw,184px);
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-texture__lead,
#meski-kitchen-ma-zamita-ar .ma-zamita-ar-honey__lead{
  margin-top:34px!important;
  color:var(--mza-green)!important;
  font-size:clamp(32px,3vw,44px)!important;
  line-height:1.65!important;
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--texture img{
  aspect-ratio:4/5;
}


/* QUOTE */

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-quote{
  padding:clamp(94px,9vw,138px) 0;
  background:
    radial-gradient(circle at 50% 20%,rgba(231,209,145,.08),transparent 32%),
    var(--mza-green-deep);
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-quote blockquote{
  margin:0;
  padding:0;
  border:0;
  color:#fffaf0;
  font-size:clamp(47px,5.2vw,80px);
  line-height:1.55;
  text-align:center;
}


/* ABSENCE */

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-absence{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(66px,8vw,132px);
  align-items:center;
  padding-top:clamp(118px,12vw,184px);
  padding-bottom:clamp(118px,12vw,184px);
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--quiet img{
  aspect-ratio:3/2;
}


/* RETURN */

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-return{
  padding:clamp(116px,12vw,182px) 0;
  background:var(--mza-paper);
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-return__grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(66px,8vw,132px);
  align-items:center;
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--making img{
  aspect-ratio:4/5;
}


/* SECRET */

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-secret{
  width:min(calc(100% - 72px),var(--mza-max));
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(66px,8vw,132px);
  align-items:center;
  padding-top:clamp(118px,12vw,184px);
  padding-bottom:clamp(118px,12vw,184px);
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-secret__ingredients{
  margin:30px 0!important;
  color:var(--mza-green)!important;
  font-size:clamp(30px,2.8vw,42px)!important;
  line-height:1.65!important;
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-secret__statement{
  margin-top:36px!important;
  color:var(--mza-honey)!important;
  font-size:clamp(34px,3.1vw,47px)!important;
  line-height:1.6!important;
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--ingredients img{
  aspect-ratio:3/2;
}


/* TODAY */

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-honey{
  padding:clamp(116px,12vw,182px) 0;
  background:var(--mza-roast-deep);
  border-top:1px solid var(--mza-line);
  border-bottom:1px solid var(--mza-line);
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-honey__grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(66px,8vw,132px);
  align-items:center;
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--honey img{
  aspect-ratio:4/5;
}


/* FINAL */

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-final{
  width:min(calc(100% - 72px),var(--mza-max));
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(66px,8vw,132px);
  align-items:center;
  padding-top:clamp(122px,12vw,190px);
  padding-bottom:clamp(122px,12vw,190px);
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-final__big{
  margin:38px 0 25px!important;
  color:var(--mza-honey)!important;
  font-size:clamp(53px,5.3vw,77px)!important;
  line-height:1.25!important;
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-final__closing{
  margin-top:36px!important;
  color:var(--mza-green)!important;
  font-size:clamp(34px,3.1vw,47px)!important;
  line-height:1.6!important;
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--final img{
  aspect-ratio:4/5;
}


/* ENDING */

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-ending{
  padding:clamp(110px,12vw,170px) 0;
  background:var(--mza-green-deep);
  text-align:center;
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-ending__small{
  margin:0 0 24px;
  color:var(--mza-gold);
  font-family:"IBM Plex Sans Arabic","Noto Sans Arabic",Arial,sans-serif;
  font-size:10px;
  font-weight:700;
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-ending__line{
  margin:0;
  color:#fffaf0;
  font-size:clamp(42px,4.9vw,69px);
  line-height:1.55;
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-cta{
  display:inline-flex;
  align-items:center;
  gap:28px;
  margin-top:54px;
  padding:16px 24px;
  background:transparent;
  border:1px solid var(--mza-gold);
  color:#fffaf0!important;
  font-family:"IBM Plex Sans Arabic","Noto Sans Arabic",Arial,sans-serif;
  font-size:10px;
  font-weight:700;
  line-height:1;
  text-decoration:none!important;
  transition:background .2s ease,color .2s ease;
}

#meski-kitchen-ma-zamita-ar .ma-zamita-ar-cta:hover,
#meski-kitchen-ma-zamita-ar .ma-zamita-ar-cta:focus{
  background:var(--mza-gold);
  color:var(--mza-green-deep)!important;
}


/* RESPONSIVE */

@media(max-width:1050px){
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-opening,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-memory__grid,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-texture,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-absence,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-return__grid,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-secret,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-honey__grid,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-final{
    grid-template-columns:1fr;
  }

  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--plate,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--texture,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--making,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--honey,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--final{
    width:62%;
    margin-inline:auto;
  }

  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--hands,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--quiet,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--ingredients{
    width:85%;
    margin-inline:auto;
  }
}

@media(max-width:720px){
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-wide,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-texture,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-secret,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-final{
    width:calc(100% - 30px);
  }

  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-reading{
    width:calc(100% - 34px);
  }

  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-hero,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-hero__inner{
    min-height:650px;
  }

  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-hero{
    background-position:44% center;
  }

  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-hero h1{
    font-size:clamp(69px,18vw,96px);
  }

  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--plate,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--texture,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--making,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--honey,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--final,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--hands,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--quiet,
  #meski-kitchen-ma-zamita-ar .ma-zamita-ar-photo--ingredients{
    width:100%;
  }
}