/* =========================================================
   IVORY BOTANICA — XCANDLES DESIGN STUDIO
========================================================= */

:root{

  --ivory:#f5f1ea;
  --bone:#ece6de;
  --nude:#d7c7b6;
  --sand:#c8b9a7;
  --olive:#707565;
  --olive-soft:#909887;
  --charcoal:#1f1d1b;
  --smoke:#7d766f;
  --line:rgba(0,0,0,.08);

  --title:'Playfair Display', serif;
  --body:'Inter', sans-serif;

}

/* =========================================================
   RESET
========================================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

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

img{
  width:100%;
  display:block;
}

a{
  text-decoration:none;
}

.ib-page{
  width:100%;
}

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

.ib-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}

.ib-hero__image{
  position:absolute;
  inset:0;
}

.ib-hero__image::after{
  content:"";
  position:absolute;
  inset:0;
  background:
  linear-gradient(
    to top,
    rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.18) 40%,
    rgba(0,0,0,.06) 100%
  );
}

.ib-hero__image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.ib-hero__content{
  position:relative;
  z-index:3;
  width:100%;
  max-width:1380px;
  margin:0 auto;
  padding:140px 90px 90px;
  color:white;
}

.ib-kicker{
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.72;
  margin-bottom:24px;
}

.ib-hero h1{
  font-family:var(--title);
  font-size:clamp(4rem,10vw,8.5rem);
  line-height:.92;
  font-weight:600;
  max-width:780px;
  margin-bottom:32px;
}

.ib-hero__lead{
  max-width:620px;
  font-size:1.12rem;
  line-height:1.9;
  color:rgba(255,255,255,.88);
}

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

.ib-cta{
  margin-top:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:220px;
  height:58px;
  padding:0 34px;
  border-radius:999px;
  background:white;
  color:black;
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:.45s ease;
}

.ib-cta:hover{
  transform:translateY(-3px);
  background:var(--bone);
}

.ib-cta--dark{
  background:var(--charcoal);
  color:white;
}

.ib-cta--dark:hover{
  background:black;
}

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

.ib-intro{
  max-width:980px;
  margin:160px auto;
  padding:0 50px;
}

.ib-intro p{
  font-size:1.24rem;
  line-height:2;
  color:var(--smoke);
  margin-bottom:38px;
}

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

.ib-section{
  width:100%;
  max-width:1450px;
  margin:0 auto 180px;
  padding:0 60px;
}

.ib-number{
  display:inline-block;
  margin-bottom:22px;
  font-size:.8rem;
  letter-spacing:.25em;
  color:var(--olive);
}

.ib-section h2{
  font-family:var(--title);
  font-size:clamp(2.5rem,4vw,5rem);
  line-height:1.02;
  font-weight:600;
  margin-bottom:36px;
  max-width:760px;
}

.ib-section p{
  font-size:1.06rem;
  line-height:2;
  color:var(--smoke);
  margin-bottom:28px;
}

/* =========================================================
   GRID
========================================================= */

.ib-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;
}

.ib-grid--reverse .ib-text{
  order:2;
}

.ib-grid--reverse .ib-image-card{
  order:1;
}

/* =========================================================
   IMAGES
========================================================= */

.ib-image-card{
  position:relative;
  overflow:hidden;
  border-radius:34px;
}

.ib-image-card img{
  aspect-ratio:4/5;
  object-fit:cover;
  transition:1.2s ease;
}

.ib-image-card:hover img{
  transform:scale(1.03);
}

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

.ib-feature{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:90px;
  align-items:center;
}

.ib-feature__image{
  overflow:hidden;
  border-radius:38px;
}

.ib-feature__image img{
  aspect-ratio:16/10;
  object-fit:cover;
}

.ib-feature__text{
  max-width:520px;
}

/* =========================================================
   QUOTE
========================================================= */

.ib-quote{
  max-width:1100px;
  margin:0 auto 200px;
  padding:0 50px;
  text-align:center;
}

.ib-quote p{
  font-family:var(--title);
  font-size:clamp(2rem,4vw,4rem);
  line-height:1.35;
  color:var(--charcoal);
}

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

.ib-gallery-text{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
}

.ib-mini-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.ib-mini-gallery img{
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:24px;
}

/* =========================================================
   ADVICE
========================================================= */

.ib-advice__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
  margin-top:60px;
}

.ib-advice article{
  background:rgba(255,255,255,.6);
  border:1px solid var(--line);
  border-radius:28px;
  padding:38px;
  backdrop-filter:blur(12px);
}

.ib-advice h3{
  font-family:var(--title);
  font-size:1.6rem;
  margin-bottom:18px;
}

/* =========================================================
   STORY
========================================================= */

.ib-story{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;
}

.ib-story__image{
  overflow:hidden;
  border-radius:40px;
}

.ib-story__image img{
  aspect-ratio:4/5;
  object-fit:cover;
}

.ib-story__text{
  max-width:620px;
}

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

.ib-final{
  position:relative;
  padding:180px 60px;
  text-align:center;
  background:
  linear-gradient(
    to bottom,
    #ebe5dc 0%,
    #e4ddd3 100%
  );
}

.ib-final h2{
  max-width:980px;
  margin:0 auto 30px;
  font-family:var(--title);
  font-size:clamp(2.8rem,5vw,5.8rem);
  line-height:1.02;
  font-weight:600;
}

.ib-final p{
  max-width:760px;
  margin:0 auto;
  font-size:1.08rem;
  line-height:2;
  color:var(--smoke);
}

/* =========================================================
   EDITORIAL DETAILS
========================================================= */

.ib-section,
.ib-final,
.ib-intro,
.ib-quote{
  position:relative;
}

.ib-section::before{
  content:"";
  position:absolute;
  top:-70px;
  left:60px;
  width:120px;
  height:1px;
  background:rgba(0,0,0,.08);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px){

  .ib-grid,
  .ib-feature,
  .ib-gallery-text,
  .ib-story{
    grid-template-columns:1fr;
    gap:60px;
  }

  .ib-feature__text,
  .ib-story__text{
    max-width:100%;
  }

}

@media(max-width:768px){

  .ib-hero{
    min-height:92vh;
  }

  .ib-hero__content{
    padding:140px 26px 50px;
  }

  .ib-hero h1{
    font-size:4rem;
  }

  .ib-hero__lead{
    font-size:1rem;
    line-height:1.8;
  }

  .ib-section,
  .ib-final{
    padding-left:24px;
    padding-right:24px;
  }

  .ib-intro{
    padding:0 24px;
    margin:110px auto;
  }

  .ib-intro p{
    font-size:1.02rem;
    line-height:1.95;
  }

  .ib-section{
    margin-bottom:120px;
  }

  .ib-section h2{
    font-size:2.5rem;
  }

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

  .ib-advice__grid{
    grid-template-columns:1fr;
  }

  .ib-quote{
    margin-bottom:130px;
    padding:0 24px;
  }

  .ib-quote p{
    font-size:2rem;
  }

  .ib-final{
    padding:120px 24px;
  }

  .ib-final h2{
    font-size:3rem;
  }

}