/* v181 — Beauty GOSSIP full homepage guardrail system
   This is the final override layer. It protects the homepage against future copy/image
   updates by using slot-based widths, explicit display lines, responsive clamps,
   and overflow-safe card behaviour. */

:root{
  --bg-ink:#2a001f;
  --bg-plum:#4a0035;
  --bg-plum-2:#8f0069;
  --bg-pink:#ff3fb2;
  --bg-cream:#fff8ef;
  --bg-card-radius:18px;
  --bg-card-gap:clamp(16px,1.6vw,28px);
  --bg-home-max:1380px;
}

/* Universal slot behaviour */
[data-home-slot]{
  box-sizing:border-box;
  overflow-wrap:normal;
  word-break:normal;
  text-wrap:balance;
}
p[data-home-slot],
li [data-home-slot],
.newsletter p,
.hero-grid .story p{
  text-wrap:pretty;
}
[data-home-mode="spans"]{display:block;}
[data-home-mode="spans"] > span{display:block;}

/* Homepage hero: align typography with the editorial cards below. */
.home-beauty-hero-copy{
  left:clamp(34px,4.1vw,68px) !important;
  right:auto !important;
  width:min(580px,43%) !important;
  max-width:580px !important;
}
.home-beauty-hero-copy h1{
  max-width:8.7ch !important;
  font-size:clamp(58px,5.55vw,98px) !important;
  line-height:.88 !important;
  letter-spacing:-.06em !important;
}
.home-beauty-hero-copy p{
  max-width:340px !important;
}
.home-beauty-hero-copy strong,
.hero-grid .hero-cta,
.newsletter .form button{
  border-radius:999px !important;
}

/* Main editorial grid: a stable three-column system that collapses before it clips. */
.hero-grid{
  width:min(var(--bg-home-max), calc(100vw - 72px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  display:grid !important;
  grid-template-columns:minmax(380px,1.15fr) minmax(320px,.95fr) minmax(310px,.78fr) !important;
  gap:var(--bg-card-gap) !important;
  align-items:stretch !important;
  overflow:visible !important;
}
.hero-grid > *,
.hero-grid .story.panel,
.hero-grid > .lead,
.hero-grid > .column,
.hero-grid > .bg164-editor-note{
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* Left feature card: copy sits higher, CTA rests lower, headline always stays inside. */
.hero-grid > .lead{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  min-height:580px !important;
  padding:clamp(30px,2.8vw,44px) clamp(30px,3.1vw,48px) !important;
  overflow:hidden !important;
}
.hero-grid > .lead .kicker{
  margin:0 0 clamp(18px,2vw,30px) !important;
  font-size:clamp(12px,.9vw,15px) !important;
  line-height:1 !important;
}
.hero-grid > .lead h1{
  margin:0 0 clamp(18px,2vw,26px) !important;
  max-width:10.7ch !important;
  font-size:clamp(46px,3.35vw,62px) !important;
  line-height:.93 !important;
  letter-spacing:-.055em !important;
  overflow:visible !important;
}
.hero-grid > .lead p{
  max-width:31ch !important;
  margin:0 !important;
  font-size:clamp(17px,1.28vw,22px) !important;
  line-height:1.34 !important;
}
.hero-grid > .lead .hero-cta{
  margin-top:auto !important;
  width:max-content !important;
  max-width:100% !important;
  white-space:nowrap !important;
}

/* Centre stack: product-photo-led cards with no label outlines. */
.hero-grid > .column{
  display:grid !important;
  grid-template-rows:repeat(3,minmax(0,1fr)) !important;
  min-height:580px !important;
  height:auto !important;
  overflow:hidden !important;
  border-radius:var(--bg-card-radius) !important;
}
.hero-grid > .column .story.panel{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  min-height:0 !important;
  height:auto !important;
  padding:clamp(20px,1.8vw,28px) clamp(22px,2vw,32px) !important;
  overflow:hidden !important;
}
.hero-grid > .column .story.panel .kicker{
  align-self:flex-start !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 0 9px !important;
  color:#fff8ef !important;
  font-size:clamp(10px,.75vw,12px) !important;
  line-height:1 !important;
  letter-spacing:.22em !important;
  text-shadow:0 1px 12px rgba(0,0,0,.35) !important;
}
.hero-grid > .column .story.panel h2{
  max-width:11.8ch !important;
  margin:0 0 8px !important;
  font-size:clamp(30px,2.25vw,41px) !important;
  line-height:.92 !important;
  letter-spacing:-.052em !important;
  overflow:visible !important;
}
.hero-grid > .column .story.panel p{
  max-width:24ch !important;
  margin:0 !important;
  font-size:clamp(13px,.94vw,16px) !important;
  line-height:1.24 !important;
  color:#fff8ef !important;
}
.hero-grid > .column .story.panel::before{
  background:linear-gradient(90deg,rgba(36,0,27,.82) 0%,rgba(55,0,40,.55) 45%,rgba(55,0,40,.18) 76%,rgba(55,0,40,.08) 100%) !important;
}
.hero-grid > .column .story.panel:not(:last-child){
  border-bottom:2px solid rgba(255,63,178,.74) !important;
  box-shadow:inset 0 -1px 0 rgba(255,186,231,.18) !important;
}

/* Right editor note: keep live text and give it room. */
.hero-grid > .bg164-editor-note{
  display:flex !important;
  flex-direction:column !important;
  min-height:580px !important;
  padding:clamp(30px,2.9vw,44px) clamp(32px,3.2vw,50px) !important;
  overflow:hidden !important;
}
.bg164-editor-title h2{
  max-width:10.7ch !important;
  margin:0 0 clamp(16px,1.7vw,24px) !important;
  font-size:clamp(40px,3.1vw,58px) !important;
  line-height:.94 !important;
  letter-spacing:-.052em !important;
  overflow:visible !important;
}
.bg164-editor-title h2 > span{display:block !important; white-space:normal !important;}
.bg164-editor-title strong{
  display:block !important;
  margin-bottom:clamp(18px,2vw,26px) !important;
  white-space:nowrap !important;
}
.bg164-editor-list{
  display:grid !important;
  gap:clamp(12px,1.2vw,19px) !important;
  margin:0 !important;
  padding:0 !important;
}
.bg164-editor-list li{
  min-width:0 !important;
}
.bg164-editor-list a{
  font-size:clamp(14px,1.03vw,18px) !important;
  line-height:1.22 !important;
  overflow-wrap:normal !important;
  text-wrap:pretty !important;
}

/* Vivienne quote and Clara static image section use predictable spacing. */
.vivienne-says{
  width:min(var(--bg-home-max), calc(100vw - 72px)) !important;
  margin:clamp(26px,3vw,46px) auto clamp(28px,3.2vw,48px) !important;
}
.bg164-facevalue{
  width:min(var(--bg-home-max), calc(100vw - 72px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  overflow:hidden !important;
}
.bg165-facevalue-image-link,
.bg165-facevalue-image-link img{
  display:block !important;
  width:100% !important;
}

/* Newsletter: designed two-line headline, with form kept in a balanced vertical stack. */
.newsletter{
  width:min(var(--bg-home-max), calc(100vw - 72px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(330px,430px) !important;
  gap:clamp(34px,4.2vw,70px) !important;
  align-items:center !important;
  padding:clamp(34px,4.6vw,62px) !important;
  overflow:hidden !important;
}
.newsletter > div:first-child{
  min-width:0 !important;
  max-width:820px !important;
}
.newsletter h2[data-home-slot="newsletter.headline"]{
  margin:0 0 20px !important;
  max-width:100% !important;
  width:100% !important;
  font-size:clamp(42px,3.05vw,55px) !important;
  line-height:.98 !important;
  letter-spacing:-.052em !important;
  text-wrap:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}
.newsletter h2[data-home-slot="newsletter.headline"] > span{
  display:block !important;
  white-space:nowrap !important;
}
.newsletter p[data-home-slot="newsletter.copy"]{
  max-width:64ch !important;
}
.newsletter .newsletter-points{
  max-width:68ch !important;
}
.newsletter .form{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
  max-width:430px !important;
  margin-left:auto !important;
}
.newsletter .form input,
.newsletter .form button{
  width:100% !important;
  min-height:58px !important;
}
.newsletter .form-note,
.newsletter-consent{
  max-width:430px !important;
  margin-left:0 !important;
}

/* Runtime fit classes: JS can safely reduce type inside its slot, but never enlarge it. */
.bg-fit-guarded{font-size:var(--bg-fit-size,inherit) !important;}
.bg-fit-tight{letter-spacing:-.065em !important;}
.bg-fit-compact{line-height:.9 !important;}
.bg-copy-over-limit{outline:2px dashed rgba(255,63,178,.5); outline-offset:4px;}

/* Collapse points: use fewer columns before any text can clip. */
@media (max-width:1220px){
  .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(320px,.82fr) !important;
  }
  .hero-grid > .column{
    min-height:560px !important;
  }
  .hero-grid > .bg164-editor-note{
    grid-column:1 / -1 !important;
    min-height:auto !important;
  }
  .bg164-editor-title h2{
    max-width:16ch !important;
  }
}
@media (max-width:900px){
  .home-beauty-hero-copy{
    left:24px !important;
    right:24px !important;
    width:auto !important;
  }
  .home-beauty-hero-copy h1{font-size:clamp(48px,10vw,82px) !important;}
  .hero-grid,
  .newsletter{
    width:min(100% - 32px, var(--bg-home-max)) !important;
    grid-template-columns:1fr !important;
  }
  .hero-grid > .lead,
  .hero-grid > .column,
  .hero-grid > .bg164-editor-note{
    min-height:auto !important;
  }
  .hero-grid > .column{
    grid-template-rows:none !important;
  }
  .hero-grid > .column .story.panel{
    min-height:230px !important;
  }
  .newsletter h2[data-home-slot="newsletter.headline"] > span{
    white-space:normal !important;
  }
  .newsletter h2[data-home-slot="newsletter.headline"]{
    font-size:clamp(38px,9vw,54px) !important;
  }
  .newsletter .form,
  .newsletter .form-note,
  .newsletter-consent{
    max-width:none !important;
    margin-left:0 !important;
  }
}
@media (max-width:560px){
  .home-beauty-hero-copy h1,
  .hero-grid > .lead h1,
  .bg164-editor-title h2{
    letter-spacing:-.045em !important;
  }
  .hero-grid > .lead,
  .hero-grid > .bg164-editor-note,
  .newsletter{
    padding:26px 20px !important;
  }
}