/* =========================================================
   GLOBAL
========================================================= */

#ep-blog,
#ep-blog *,
#ep-blog *::before,
#ep-blog *::after{
  box-sizing:border-box;
}


#ep-blog{
  --ivory:#f5f0e6;
  --paper:#fbf8f1;
  --white:#fffdf8;

  --navy:#0d1d35;
  --navy2:#1a2d4a;

  --text:#3a4a66;
  --muted:#68758a;

  --gold:#b08d57;
  --gold-dark:#7a5c2d;
  --gold-light:#ead6ad;

  --line:rgba(13,29,53,.10);
  --line2:rgba(13,29,53,.16);

  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter Tight",Arial,sans-serif;

  position:relative;

  width:100%;

  overflow:hidden;

  padding:54px 30px 70px;

  background:
    radial-gradient(
      65% 48% at 96% 0%,
      rgba(176,141,87,.10),
      transparent 62%
    ),
    var(--ivory);

  color:var(--navy);

  font-family:var(--sans);

  -webkit-font-smoothing:antialiased;
}


#ep-blog a{
  color:inherit;
}


#ep-blog img{
  display:block;

  max-width:100%;
}


#ep-blog .ep-inner{
  width:min(1280px,100%);

  margin:0 auto;
}



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

#ep-blog .ep-mast{
  display:grid;

  grid-template-columns:
    minmax(0,1.12fr)
    minmax(350px,.88fr);

  gap:70px;

  align-items:end;

  margin-bottom:34px;

  padding-bottom:34px;

  border-bottom:
    1px solid var(--line2);
}



/* META */

#ep-blog .ep-meta{
  display:flex;

  align-items:center;

  gap:13px;

  margin-bottom:18px;

  color:var(--text);

  font-size:11px;

  font-weight:700;

  letter-spacing:.18em;

  text-transform:uppercase;
}


#ep-blog .ep-meta-bar{
  width:34px;

  height:1px;

  background:var(--gold-dark);

  opacity:.55;
}



/* TITLE */

#ep-blog .ep-title{
  max-width:760px;

  margin:0;

  color:var(--navy);

  font-family:var(--serif);

  font-size:
    clamp(48px,5.7vw,82px);

  font-weight:400;

  line-height:.97;

  letter-spacing:-.035em;
}


#ep-blog .ep-title em{
  color:var(--gold-dark);

  font-style:italic;

  font-weight:300;
}


#ep-blog .ep-title-small{
  display:block;

  margin-top:16px;

  color:var(--text);

  font-family:var(--sans);

  font-size:14px;

  font-style:normal;

  font-weight:600;

  line-height:1.5;

  letter-spacing:.02em;
}



/* INTRO */

#ep-blog .ep-lede{
  max-width:540px;

  margin:0 0 22px;

  color:var(--navy2);

  font-family:var(--serif);

  font-size:20px;

  line-height:1.62;
}



/* CHIPS */

#ep-blog .ep-chips{
  display:flex;

  flex-wrap:wrap;

  gap:8px;
}


#ep-blog .ep-chip{
  display:inline-flex;

  align-items:center;

  gap:7px;

  min-height:33px;

  padding:7px 11px;

  border:
    1px solid rgba(176,141,87,.28);

  border-radius:999px;

  background:
    rgba(255,253,248,.66);

  color:var(--text);

  font-size:10px;

  font-weight:700;

  letter-spacing:.08em;

  text-transform:uppercase;
}


#ep-blog .ep-chip::before{
  content:"";

  width:5px;

  height:5px;

  border-radius:50%;

  background:var(--gold);
}



/* =========================================================
   CAROUSEL VIEWPORT
========================================================= */

#ep-blog .ep-carousel{
  position:relative;

  width:100%;
}


#ep-blog .ep-carousel-viewport{
  position:relative;

  width:100%;

  overflow:hidden;

  cursor:grab;

  touch-action:pan-y;

  user-select:none;

  -webkit-user-select:none;
}


#ep-blog .ep-carousel-viewport.is-dragging{
  cursor:grabbing;
}



/* =========================================================
   DESKTOP TRACK — 2 ROWS
========================================================= */

#ep-blog .ep-track{
  display:grid;

  grid-template-rows:
    repeat(2,minmax(0,auto));

  grid-auto-flow:column;

  gap:16px 18px;

  width:max-content;

  padding:2px 0 12px;

  transform:translate3d(0,0,0);

  will-change:transform;
}



/* =========================================================
   ARTICLE CARD
========================================================= */

#ep-blog .ep-article{
  position:relative;

  display:flex;

  height:100%;

  flex-direction:column;

  overflow:hidden;

  border:
    1px solid var(--line);

  border-radius:17px;

  background:
    rgba(255,253,248,.90);

  color:inherit;

  text-decoration:none;

  box-shadow:
    0 10px 28px
    rgba(13,29,53,.06);

  transition:
    transform .32s ease,
    box-shadow .32s ease,
    border-color .32s ease;
}


#ep-blog .ep-article:hover{
  transform:translateY(-4px);

  border-color:
    rgba(176,141,87,.42);

  box-shadow:
    0 18px 42px
    rgba(13,29,53,.11);
}



/* GOLD LINE */

#ep-blog .ep-article::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:3px;

  background:
    linear-gradient(
      90deg,
      var(--gold-dark),
      var(--gold-light)
    );

  transform:scaleX(0);

  transform-origin:left;

  transition:
    transform .35s ease;
}


#ep-blog .ep-article:hover::after{
  transform:scaleX(1);
}



/* =========================================================
   IMAGE
========================================================= */

#ep-blog .ep-cover{
  position:relative;

  width:100%;

  aspect-ratio:16 / 8.4;

  overflow:hidden;

  background:#ded6ca;
}


#ep-blog .ep-cover img{
  width:100%;

  height:100%;

  object-fit:cover;

  transform:scale(1.01);

  filter:
    saturate(.92)
    contrast(1.02);

  transition:
    transform .65s ease;
}


#ep-blog .ep-article:hover
.ep-cover img{
  transform:scale(1.055);
}


#ep-blog .ep-cover::after{
  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(13,29,53,.02),
      rgba(13,29,53,.38)
    );

  pointer-events:none;
}



/* GUIDE NUMBER */

#ep-blog .ep-guide-num{
  position:absolute;

  z-index:3;

  top:12px;
  left:12px;

  display:flex;

  align-items:center;

  gap:7px;

  padding:7px 9px;

  border:
    1px solid
    rgba(255,255,255,.22);

  border-radius:999px;

  background:
    rgba(13,29,53,.57);

  backdrop-filter:blur(8px);

  -webkit-backdrop-filter:blur(8px);
}


#ep-blog .ep-guide-num strong{
  color:var(--gold-light);

  font-family:var(--serif);

  font-size:17px;

  font-style:italic;

  font-weight:400;
}


#ep-blog .ep-guide-num span{
  color:#fff;

  font-size:9px;

  font-weight:700;

  letter-spacing:.10em;

  text-transform:uppercase;
}



/* IMAGE TAG */

#ep-blog .ep-tag{
  position:absolute;

  z-index:3;

  right:11px;
  bottom:11px;

  max-width:
    calc(100% - 22px);

  padding:6px 9px;

  border:
    1px solid
    rgba(255,255,255,.20);

  border-radius:999px;

  background:
    rgba(13,29,53,.70);

  color:#fff;

  font-size:9px;

  font-weight:700;

  line-height:1.2;

  letter-spacing:.08em;

  text-transform:uppercase;
}



/* =========================================================
   ARTICLE BODY
========================================================= */

#ep-blog .ep-body{
  display:flex;

  flex:1;

  flex-direction:column;

  padding:
    18px
    19px
    20px;
}


#ep-blog .ep-kicker{
  display:flex;

  align-items:center;

  gap:7px;

  margin-bottom:8px;

  color:var(--gold-dark);

  font-size:9px;

  font-weight:700;

  letter-spacing:.12em;

  text-transform:uppercase;
}


#ep-blog .ep-kicker::before{
  content:"";

  width:15px;

  height:1px;

  background:currentColor;
}


#ep-blog .ep-article-title{
  margin:
    0
    0
    9px;

  color:var(--navy);

  font-family:var(--serif);

  font-size:20px;

  font-weight:500;

  line-height:1.14;

  letter-spacing:-.015em;
}


#ep-blog .ep-article-title em{
  color:var(--gold-dark);

  font-style:italic;

  font-weight:400;
}


#ep-blog .ep-desc{
  flex:1;

  margin:
    0
    0
    14px;

  color:var(--text);

  font-size:13px;

  line-height:1.54;
}



/* CARD FOOT */

#ep-blog .ep-card-foot{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  margin-top:auto;

  padding-top:12px;

  border-top:
    1px solid var(--line);
}


#ep-blog .ep-read{
  display:flex;

  align-items:center;

  gap:7px;

  color:var(--navy);

  font-size:9px;

  font-weight:700;

  letter-spacing:.11em;

  text-transform:uppercase;
}


#ep-blog .ep-read-arrow{
  color:var(--gold-dark);

  font-size:16px;
}



/* =========================================================
   CAROUSEL CONTROLS
========================================================= */

#ep-blog .ep-controls{
  display:grid;

  grid-template-columns:
    minmax(120px,1fr)
    auto
    46px
    46px;

  align-items:center;

  gap:10px;

  margin-top:14px;
}


#ep-blog .ep-progress{
  position:relative;

  width:100%;

  height:4px;

  overflow:hidden;

  border-radius:999px;

  background:
    rgba(13,29,53,.11);
}


#ep-blog .ep-progress-bar{
  display:block;

  width:0;

  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      var(--gold-dark),
      var(--gold-light)
    );

  transition:
    width .3s ease;
}



/* COUNTER */

#ep-blog .ep-counter{
  min-width:83px;

  color:var(--muted);

  font-family:var(--serif);

  font-size:13px;

  text-align:center;
}


#ep-blog .ep-current{
  color:var(--navy);

  font-size:20px;

  font-style:italic;
}



/* ARROWS */

#ep-blog .ep-arrow{
  width:46px;

  height:46px;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:0;

  border:
    1px solid
    rgba(176,141,87,.32);

  border-radius:50%;

  background:var(--paper);

  color:var(--navy);

  cursor:pointer;

  box-shadow:
    0 7px 18px
    rgba(13,29,53,.06);

  transition:.25s ease;
}


#ep-blog .ep-arrow:hover:not(:disabled){
  transform:translateY(-2px);

  border-color:var(--gold);

  background:#fff;
}


#ep-blog .ep-arrow:disabled{
  opacity:.25;

  cursor:default;
}


#ep-blog .ep-arrow svg{
  width:18px;

  height:18px;

  fill:none;

  stroke:currentColor;

  stroke-width:1.8;

  stroke-linecap:round;

  stroke-linejoin:round;
}



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

#ep-blog .ep-final{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap:40px;

  align-items:center;

  margin-top:38px;

  padding:
    27px
    30px;

  border:
    1px solid
    rgba(176,141,87,.20);

  border-radius:17px;

  background:
    rgba(255,253,248,.72);
}


#ep-blog .ep-final-label{
  margin-bottom:8px;

  color:var(--gold-dark);

  font-size:10px;

  font-weight:700;

  letter-spacing:.13em;

  text-transform:uppercase;
}


#ep-blog .ep-final h3{
  margin:
    0
    0
    8px;

  color:var(--navy);

  font-family:var(--serif);

  font-size:
    clamp(28px,2.7vw,38px);

  font-weight:400;

  line-height:1.1;
}


#ep-blog .ep-final h3 em{
  color:var(--gold-dark);

  font-style:italic;

  font-weight:300;
}


#ep-blog .ep-final p{
  max-width:700px;

  margin:0;

  color:var(--text);

  font-size:14px;

  line-height:1.6;
}


#ep-blog .ep-all-btn{
  min-height:52px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:9px;

  padding:
    14px
    21px;

  border-radius:999px;

  background:var(--navy);

  color:#fff!important;

  font-size:10px;

  font-weight:700;

  letter-spacing:.10em;

  text-decoration:none;

  text-transform:uppercase;

  white-space:nowrap;

  transition:.25s ease;
}


#ep-blog .ep-all-btn:hover{
  transform:translateY(-2px);

  background:var(--gold-dark);
}



/* =========================================================
   TABLET
========================================================= */

@media(max-width:1050px)
and (min-width:768px){

  #ep-blog{
    padding:
      48px
      24px
      60px;
  }


  #ep-blog .ep-mast{
    grid-template-columns:1fr;

    gap:24px;
  }


  #ep-blog .ep-title{
    max-width:850px;
  }


  #ep-blog .ep-lede{
    max-width:760px;
  }

}



/* =========================================================
   MOBILE — ONE ROW
========================================================= */

@media(max-width:767px){

  #ep-blog{
    padding:
      27px
      18px
      45px;
  }


  /* HEADER */

  #ep-blog .ep-mast{
    grid-template-columns:1fr;

    gap:19px;

    margin-bottom:23px;

    padding-bottom:23px;
  }


  #ep-blog .ep-meta{
    margin-bottom:12px;

    font-size:9.5px;
  }


  #ep-blog .ep-title{
    font-size:
      clamp(38px,10.7vw,49px);

    line-height:.99;
  }


  #ep-blog .ep-title-small{
    margin-top:12px;

    font-size:12px;
  }


  #ep-blog .ep-lede{
    margin-bottom:16px;

    font-size:17px;

    line-height:1.55;
  }


  #ep-blog .ep-chip{
    min-height:29px;

    padding:
      6px
      9px;

    font-size:9px;
  }



  /* MOBILE CAROUSEL */

  #ep-blog .ep-carousel-viewport{
    width:
      calc(100% + 18px);

    margin-right:-18px;
  }


  #ep-blog .ep-track{
    display:flex;

    grid-template-rows:none;

    grid-auto-flow:initial;

    gap:12px;

    padding:
      2px
      18px
      10px
      0;
  }



  /* MOBILE CARD */

  #ep-blog .ep-article{
    flex:
      0
      0
      min(84vw,365px);

    width:
      min(84vw,365px);

    min-width:
      min(84vw,365px);
  }


  #ep-blog .ep-article:hover{
    transform:none;
  }


  #ep-blog .ep-cover{
    aspect-ratio:
      16 / 9.6;
  }


  #ep-blog .ep-body{
    padding:
      18px
      17px
      19px;
  }


  #ep-blog .ep-article-title{
    font-size:21px;
  }


  #ep-blog .ep-desc{
    font-size:13.5px;

    line-height:1.58;
  }



  /* CONTROLS */

  #ep-blog .ep-controls{
    grid-template-columns:
      minmax(50px,1fr)
      auto
      42px
      42px;

    gap:7px;

    margin-top:8px;
  }


  #ep-blog .ep-arrow{
    width:42px;

    height:42px;
  }


  #ep-blog .ep-counter{
    min-width:55px;

    font-size:12px;
  }


  #ep-blog .ep-current{
    font-size:19px;
  }



  /* FINAL CTA */

  #ep-blog .ep-final{
    grid-template-columns:1fr;

    gap:18px;

    margin-top:27px;

    padding:
      22px
      18px;
  }


  #ep-blog .ep-final h3{
    font-size:
      clamp(27px,7.5vw,34px);
  }


  #ep-blog .ep-final p{
    font-size:13.5px;
  }


  #ep-blog .ep-all-btn{
    width:100%;
  }

}



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

@media(max-width:390px){

  #ep-blog{
    padding-left:15px;

    padding-right:15px;
  }


  #ep-blog .ep-carousel-viewport{
    width:
      calc(100% + 15px);

    margin-right:-15px;
  }


  #ep-blog .ep-track{
    padding-right:15px;
  }


  #ep-blog .ep-article{
    flex-basis:85vw;

    width:85vw;

    min-width:85vw;
  }


  #ep-blog .ep-title{
    font-size:
      clamp(36px,10.5vw,44px);
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  #ep-blog *,
  #ep-blog *::before,
  #ep-blog *::after{
    animation:none!important;

    transition:none!important;

    scroll-behavior:auto!important;
  }

}