/* ============================================================
   CHERCHEZ LA FEMME
   HOMEPAGE EDITORIAL / LUXURY SYSTEM
   THE EDIT + STARS
   ============================================================ */

.clf-home-rebuilt{
  --clf-paper:#f6f3ee;
  --clf-ink:#211d19;
  --clf-muted:rgba(33,29,25,.57);
  --clf-faint:rgba(33,29,25,.13);
  --clf-bronze:#8a6449;

  display:block !important;
  position:relative !important;

  width:100% !important;
  max-width:none !important;

  height:auto !important;
  min-height:0 !important;

  margin:0 !important;
  padding:66px 0 78px !important;

  overflow:visible !important;

  background:var(--clf-paper) !important;
  color:var(--clf-ink) !important;
}

.clf-home-rebuilt + .clf-home-rebuilt{
  padding-top:74px !important;
}

.clf-home-shell{
  width:min(calc(100% - 64px),1328px);
  margin:0 auto;
}


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

.clf-home-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;

  width:100%;

  margin:0 0 29px;
}

.clf-home-section-title{
  display:flex;
  align-items:center;
  gap:20px;

  flex:1 1 auto;
  min-width:0;
}

.clf-home-section-title span{
  flex:0 0 auto;

  font-family:var(--sans);
  font-size:12px;
  line-height:1;
  font-weight:800;

  letter-spacing:.19em;
  text-transform:uppercase;

  color:var(--clf-ink);
}

.clf-home-section-title i{
  display:block;

  flex:1 1 auto;
  height:1px;

  background:rgba(33,29,25,.17);
}

.clf-home-section-head small,
.clf-home-all{
  flex:0 0 auto;

  font-family:var(--sans);
  font-size:9px;
  line-height:1;
  font-weight:750;

  letter-spacing:.16em;
  text-transform:uppercase;

  color:rgba(33,29,25,.56);
}

.clf-home-all{
  position:relative;

  padding:8px 0;

  text-decoration:none;
}

.clf-home-all:after{
  content:"";

  position:absolute;
  left:0;
  right:100%;
  bottom:2px;

  height:1px;

  background:var(--clf-ink);

  transition:right .28s ease;
}

.clf-home-all:hover:after{
  right:0;
}


/* ============================================================
   SHARED META
   ============================================================ */

.clf-home-card-meta{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:15px;

  width:100%;

  margin:0 0 14px;
  padding:0 0 10px;

  border-bottom:1px solid var(--clf-faint);

  font-family:var(--sans);
  text-transform:uppercase;
}

.clf-home-card-meta span{
  min-width:0;

  font-size:10.5px;
  line-height:1.35;
  font-weight:760;

  letter-spacing:.115em;

  color:var(--clf-bronze);
}

.clf-home-card-meta time{
  flex:0 0 auto;

  white-space:nowrap;

  font-size:9px;
  line-height:1.4;
  font-weight:650;

  letter-spacing:.10em;

  color:rgba(33,29,25,.46);
}


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

.clf-home-rebuilt figure{
  position:relative;

  margin:0 !important;
  overflow:hidden;

  background:#e7e1d9;
}

.clf-home-rebuilt img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  transform:scale(1.001);

  transition:
    transform .75s cubic-bezier(.2,.72,.2,1),
    filter .45s ease;
}

.clf-home-rebuilt article:hover img{
  transform:scale(1.017);
}


/* ============================================================
   THE EDIT
   6 cols lead + four refined stories
   ============================================================ */

.clf-home-edit{
  border-top:1px solid rgba(33,29,25,.11);
}

.clf-edit-grid{
  display:grid;

  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));

  column-gap:20px;
  row-gap:30px;

  align-items:start;
}

.clf-edit-card{
  grid-column:span 3;

  min-width:0;
}

.clf-edit-card > a{
  display:block;

  color:inherit;
  text-decoration:none;
}

.clf-edit-card figure{
  width:100%;
  aspect-ratio:1.45 / 1;
}

.clf-edit-card .clf-home-card-copy{
  padding:17px 2px 0;
}

.clf-edit-card h3{
  max-width:17ch;

  margin:0;

  font-family:var(--serif);
  font-size:clamp(23px,1.8vw,28px);
  line-height:1.01;
  font-weight:400;

  letter-spacing:-.032em;

  text-wrap:balance;

  color:var(--clf-ink);
}

/* whole card is clickable — no ecommerce-like CTA */
.clf-edit-card b{
  display:none !important;
}


/* lead */

.clf-edit-card.is-lead{
  grid-column:span 6;
  grid-row:1 / 3;
}

.clf-edit-card.is-lead figure{
  aspect-ratio:1.20 / 1;
}

.clf-edit-card.is-lead .clf-home-card-copy{
  padding:20px 4px 0;
}

.clf-edit-card.is-lead h3{
  max-width:15ch;

  font-size:clamp(38px,3.25vw,48px);
  line-height:.96;

  letter-spacing:-.042em;
}

.clf-edit-card.is-lead p{
  max-width:46ch;

  margin:17px 0 0;

  font-family:var(--serif);
  font-size:16px;
  line-height:1.48;

  color:var(--clf-muted);
}


/* ============================================================
   STARS
   ============================================================ */

.clf-home-stars{
  border-top:1px solid rgba(33,29,25,.11);
}

.clf-stars-layout{
  display:grid;

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

  gap:28px;

  align-items:start;
}


/* ============================================================
   STARS LEAD
   ============================================================ */

.clf-stars-lead{
  min-width:0;
}

.clf-stars-lead > a{
  display:block;

  color:inherit;
  text-decoration:none;
}

.clf-stars-lead figure{
  width:100%;
  aspect-ratio:1.48 / 1;
}

.clf-stars-lead .clf-home-card-copy{
  padding:20px 3px 0;
}

.clf-stars-lead h3{
  max-width:16ch;

  margin:0;

  font-family:var(--serif);
  font-size:clamp(37px,3vw,47px);
  line-height:.97;
  font-weight:400;

  letter-spacing:-.04em;

  text-wrap:balance;
}

.clf-stars-lead p{
  max-width:49ch;

  margin:16px 0 0;

  font-family:var(--serif);
  font-size:16px;
  line-height:1.49;

  color:var(--clf-muted);
}


/* ============================================================
   STARS SUPPORT GRID
   ============================================================ */

.clf-stars-stack{
  display:grid;

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

  gap:27px 18px;

  align-items:start;
}

.clf-stars-side{
  min-width:0;
}

.clf-stars-side > a{
  display:block;

  color:inherit;
  text-decoration:none;
}

.clf-stars-side figure{
  width:100%;
  height:auto;

  aspect-ratio:1.32 / 1;
}

.clf-stars-side-copy{
  padding:15px 1px 0;
}

.clf-stars-side .clf-home-card-meta{
  margin-bottom:12px;
  padding-bottom:9px;
}

.clf-stars-side .clf-home-card-meta span{
  font-size:9.5px;
}

.clf-stars-side .clf-home-card-meta time{
  font-size:8.5px;
}

.clf-stars-side h3{
  max-width:18ch;

  margin:0;

  font-family:var(--serif);
  font-size:clamp(23px,1.75vw,29px);
  line-height:1;
  font-weight:400;

  letter-spacing:-.032em;

  text-wrap:balance;
}


/* first support becomes wider when there are 4 stories */

.clf-home-stars[data-clf-count="4"] .clf-stars-side:first-child{
  grid-column:1 / -1;
}

.clf-home-stars[data-clf-count="4"] .clf-stars-side:first-child > a{
  display:grid;

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

  gap:20px;

  align-items:center;
}

.clf-home-stars[data-clf-count="4"] .clf-stars-side:first-child figure{
  aspect-ratio:1.35 / 1;
}

.clf-home-stars[data-clf-count="4"] .clf-stars-side:first-child .clf-stars-side-copy{
  padding:0;
}

.clf-home-stars[data-clf-count="4"] .clf-stars-side:first-child h3{
  font-size:clamp(27px,2.05vw,34px);
}


/* ============================================================
   EXACTLY 3 STORIES
   lead + two equal support cards
   ============================================================ */

.clf-home-stars[data-clf-count="3"] .clf-stars-stack{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.clf-home-stars[data-clf-count="3"] .clf-stars-side figure{
  aspect-ratio:1.15 / 1;
}


/* ============================================================
   EXACTLY 2 STORIES
   THIS FIXES THE CURRENT EMPTY-SPACE PROBLEM
   ============================================================ */

.clf-home-stars[data-clf-count="2"] .clf-stars-layout{
  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:24px;
}

.clf-home-stars[data-clf-count="2"] .clf-stars-stack{
  display:block;
}

.clf-home-stars[data-clf-count="2"] .clf-stars-side{
  width:100%;
}

.clf-home-stars[data-clf-count="2"] .clf-stars-side > a{
  display:block;
}

.clf-home-stars[data-clf-count="2"] .clf-stars-side figure{
  width:100%;
  height:auto;

  aspect-ratio:1.48 / 1;
}

.clf-home-stars[data-clf-count="2"] .clf-stars-side-copy{
  padding:20px 3px 0;
}

.clf-home-stars[data-clf-count="2"] .clf-stars-side .clf-home-card-meta{
  margin-bottom:14px;
  padding-bottom:10px;
}

.clf-home-stars[data-clf-count="2"] .clf-stars-side .clf-home-card-meta span{
  font-size:10.5px;
}

.clf-home-stars[data-clf-count="2"] .clf-stars-side .clf-home-card-meta time{
  font-size:9px;
}

.clf-home-stars[data-clf-count="2"] .clf-stars-side h3{
  max-width:16ch;

  font-size:clamp(36px,2.8vw,45px);
  line-height:.97;

  letter-spacing:-.04em;
}


/* Make the two feature images feel equally intentional */
.clf-home-stars[data-clf-count="2"] .clf-stars-lead figure,
.clf-home-stars[data-clf-count="2"] .clf-stars-side figure{
  aspect-ratio:1.48 / 1;
}


/* ============================================================
   EXACTLY 1 STORY
   ============================================================ */

.clf-home-stars[data-clf-count="1"] .clf-stars-layout{
  display:block;

  max-width:940px;
}

.clf-home-stars[data-clf-count="1"] .clf-stars-stack{
  display:none;
}


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

@media(max-width:1050px){

  .clf-home-shell{
    width:calc(100% - 40px);
  }

  .clf-edit-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto;

    gap:32px 20px;
  }

  .clf-edit-card,
  .clf-edit-card.is-lead{
    grid-column:auto;
    grid-row:auto;
  }

  .clf-edit-card.is-lead{
    grid-column:1 / -1;
  }

  .clf-edit-card.is-lead figure{
    aspect-ratio:1.65 / 1;
  }

  .clf-edit-card figure{
    aspect-ratio:1.4 / 1;
  }


  .clf-stars-layout,
  .clf-home-stars[data-clf-count="2"] .clf-stars-layout{
    grid-template-columns:1fr;
  }

  .clf-stars-stack,
  .clf-home-stars[data-clf-count="2"] .clf-stars-stack{
    display:grid;

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

    gap:30px 20px;

    margin-top:8px;
  }

  .clf-home-stars[data-clf-count="4"] .clf-stars-side:first-child{
    grid-column:auto;
  }

  .clf-home-stars[data-clf-count="4"] .clf-stars-side:first-child > a{
    display:block;
  }

  .clf-home-stars[data-clf-count="4"] .clf-stars-side:first-child .clf-stars-side-copy{
    padding:15px 1px 0;
  }

  .clf-home-stars[data-clf-count="2"] .clf-stars-side h3{
    font-size:31px;
  }
}


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

@media(max-width:700px){

  .clf-home-rebuilt{
    padding:48px 0 56px !important;
  }

  .clf-home-rebuilt + .clf-home-rebuilt{
    padding-top:52px !important;
  }

  .clf-home-shell{
    width:calc(100% - 28px);
  }

  .clf-home-section-head{
    gap:13px;

    margin-bottom:21px;
  }

  .clf-home-section-title{
    gap:12px;
  }

  .clf-home-section-title span{
    font-size:10px;
  }

  .clf-home-section-head small{
    display:none;
  }

  .clf-home-all{
    font-size:8px;
  }


  /* edit */

  .clf-edit-grid{
    display:block;
  }

  .clf-edit-card,
  .clf-edit-card.is-lead{
    margin:0 0 37px;
  }

  .clf-edit-card:last-child{
    margin-bottom:0;
  }

  .clf-edit-card figure,
  .clf-edit-card.is-lead figure{
    aspect-ratio:1.28 / 1;
  }

  .clf-edit-card .clf-home-card-copy,
  .clf-edit-card.is-lead .clf-home-card-copy{
    padding:16px 0 0;
  }

  .clf-edit-card h3,
  .clf-edit-card.is-lead h3{
    max-width:100%;

    font-size:30px;
    line-height:.99;
  }

  .clf-edit-card.is-lead p{
    font-size:15.5px;
  }


  /* meta */

  .clf-home-card-meta{
    gap:9px;

    margin-bottom:12px;
  }

  .clf-home-card-meta span{
    font-size:9.5px;
  }

  .clf-home-card-meta time{
    font-size:8px;
  }


  /* stars */

  .clf-stars-layout,
  .clf-home-stars[data-clf-count="2"] .clf-stars-layout{
    display:block;
  }

  .clf-stars-lead{
    margin-bottom:38px;
  }

  .clf-stars-lead figure{
    aspect-ratio:1.22 / 1;
  }

  .clf-stars-lead .clf-home-card-copy{
    padding:17px 0 0;
  }

  .clf-stars-lead h3{
    max-width:100%;

    font-size:33px;
  }

  .clf-stars-lead p{
    font-size:15.5px;
  }

  .clf-stars-stack,
  .clf-home-stars[data-clf-count="2"] .clf-stars-stack,
  .clf-home-stars[data-clf-count="3"] .clf-stars-stack{
    display:block;

    margin:0;
  }

  .clf-stars-side{
    margin:0 0 34px;
  }

  .clf-stars-side:last-child{
    margin-bottom:0;
  }

  .clf-stars-side figure,
  .clf-home-stars[data-clf-count="2"] .clf-stars-side figure{
    aspect-ratio:1.25 / 1;
  }

  .clf-stars-side-copy,
  .clf-home-stars[data-clf-count="2"] .clf-stars-side-copy{
    padding:15px 0 0;
  }

  .clf-stars-side h3,
  .clf-home-stars[data-clf-count="2"] .clf-stars-side h3{
    max-width:100%;

    font-size:28px;
    line-height:1;
  }
}


/* ============================================================
   CLF STARS · DEFINITIVE LUXURY COVER
   ============================================================ */

@media(min-width:1051px){

  .clf-home-stars[data-clf-count="3"]{
    padding-bottom:30px !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-layout{
    display:grid !important;
    grid-template-columns:minmax(0,1.5fr) minmax(370px,.72fr) !important;
    gap:28px !important;
    align-items:stretch !important;
  }


  /* ==========================================================
     MARTA — TRUE COVER CARD
     ========================================================== */

  .clf-home-stars[data-clf-count="3"] .clf-stars-lead{
    height:620px !important;
    min-height:620px !important;
    margin:0 !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-lead > a{
    position:relative !important;

    display:block !important;

    width:100% !important;
    height:100% !important;

    overflow:hidden !important;

    color:#fff !important;
    text-decoration:none !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-lead figure{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    margin:0 !important;

    aspect-ratio:auto !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-lead figure::after{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;

    background:
      linear-gradient(
        180deg,
        rgba(12,11,10,.00) 25%,
        rgba(12,11,10,.08) 47%,
        rgba(12,11,10,.48) 72%,
        rgba(12,11,10,.88) 100%
      ) !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-lead img{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-lead .clf-home-card-copy{
    position:absolute !important;

    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    z-index:3 !important;

    padding:34px 38px 36px !important;

    background:transparent !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-lead .clf-home-card-meta{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    margin:0 0 18px !important;
    padding:0 0 12px !important;

    border-bottom:1px solid rgba(255,248,240,.30) !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-lead .clf-home-card-meta span{
    color:#e7cdb8 !important;

    font-size:10px !important;
    font-weight:760 !important;
    letter-spacing:.15em !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-lead .clf-home-card-meta time{
    color:rgba(255,248,240,.75) !important;

    font-size:9px !important;
    letter-spacing:.11em !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-lead h3{
    max-width:11ch !important;

    margin:0 !important;

    font-family:var(--serif) !important;
    font-size:clamp(46px,3.65vw,59px) !important;
    line-height:.91 !important;
    font-weight:400 !important;

    letter-spacing:-.052em !important;

    color:#fffaf4 !important;

    text-wrap:balance !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-lead p{
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:3 !important;

    overflow:hidden !important;

    max-width:39ch !important;

    margin:17px 0 0 !important;

    font-family:var(--serif) !important;
    font-size:15.5px !important;
    line-height:1.48 !important;

    color:rgba(255,248,240,.84) !important;
  }


  /* ==========================================================
     TWO EDITORIAL CARDS ON THE RIGHT
     ========================================================== */

  .clf-home-stars[data-clf-count="3"] .clf-stars-stack{
    display:grid !important;

    grid-template-columns:1fr !important;
    grid-template-rows:repeat(2,minmax(0,1fr)) !important;

    gap:24px !important;

    height:620px !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-side{
    min-width:0 !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;

    background:transparent !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-side > a{
    display:grid !important;

    grid-template-rows:minmax(0,1fr) auto !important;

    width:100% !important;
    height:100% !important;

    color:inherit !important;
    text-decoration:none !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-side figure{
    width:100% !important;
    height:100% !important;

    min-height:0 !important;

    margin:0 !important;

    aspect-ratio:auto !important;

    overflow:hidden !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-side img{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;

    transition:transform .65s cubic-bezier(.2,.7,.2,1) !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-side:hover img{
    transform:scale(1.018) !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-side-copy{
    padding:14px 1px 0 !important;

    background:transparent !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-side .clf-home-card-meta{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;

    gap:12px !important;

    margin:0 0 11px !important;
    padding:0 0 9px !important;

    border-bottom:1px solid rgba(33,29,25,.13) !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-side .clf-home-card-meta span{
    max-width:75% !important;

    font-size:9.5px !important;
    line-height:1.35 !important;
    font-weight:760 !important;

    letter-spacing:.12em !important;

    color:#8a6449 !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-side .clf-home-card-meta time{
    flex:0 0 auto !important;

    font-size:8px !important;
    letter-spacing:.09em !important;

    color:rgba(33,29,25,.46) !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-side h3{
    max-width:17ch !important;

    margin:0 !important;

    font-family:var(--serif) !important;
    font-size:clamp(25px,1.75vw,31px) !important;
    line-height:.97 !important;
    font-weight:400 !important;

    letter-spacing:-.038em !important;

    color:#211d19 !important;

    text-wrap:balance !important;
  }
}


/* TABLET */

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

  .clf-home-stars[data-clf-count="3"] .clf-stars-layout{
    display:block !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-lead{
    height:570px !important;
    min-height:570px !important;

    margin-bottom:28px !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-stack{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:auto !important;

    gap:20px !important;

    height:auto !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-side > a{
    display:block !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-side figure{
    height:auto !important;
    aspect-ratio:1.35 / 1 !important;
  }
}


/* MOBILE */

@media(max-width:700px){

  .clf-home-stars[data-clf-count="3"] .clf-stars-layout{
    display:block !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-lead{
    height:530px !important;
    min-height:530px !important;

    margin-bottom:28px !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-lead .clf-home-card-copy{
    padding:22px 20px 23px !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-lead h3{
    max-width:11ch !important;

    font-size:38px !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-lead p{
    font-size:14.5px !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-stack{
    display:block !important;

    height:auto !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-side{
    margin-bottom:28px !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-side:last-child{
    margin-bottom:0 !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-side > a{
    display:block !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-side figure{
    height:auto !important;
    aspect-ratio:1.3 / 1 !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-side-copy{
    padding-top:14px !important;
  }

  .clf-home-stars[data-clf-count="3"] .clf-stars-side h3{
    max-width:100% !important;

    font-size:29px !important;
  }
}