/* v182 — visual reset + safe guardrails
   Restores the approved visual layout after the v181 guardrail layer over-tightened
   the homepage, while keeping the display-copy contract/checker files in place.
   Guardrail principle: constrain copy before layout; do not let JS shrink live type
   into unreadable layouts. */

:root{
  --bg-home-max:1380px;
  --bg-page-gutter:clamp(22px,5vw,72px);
  --bg-gap:clamp(16px,1.45vw,22px);
}

/* Keep display slots safe without forcing ugly line breaks globally. */
[data-home-slot]{
  box-sizing:border-box;
  word-break:normal;
  overflow-wrap:normal;
}
p[data-home-slot],
.hero-grid .story p,
.bg164-editor-list a,
.newsletter p{
  text-wrap:pretty;
}
[data-home-mode="spans"] > span{display:block;}

/* Main homepage feature grid: fixed proportions, no horizontal bleed. */
.hero-grid{
  width:min(var(--bg-home-max), calc(100vw - var(--bg-page-gutter))) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  display:grid !important;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.94fr) minmax(0,.74fr) !important;
  gap:var(--bg-gap) !important;
  align-items:stretch !important;
  overflow:visible !important;
}
.hero-grid > .lead,
.hero-grid > .column,
.hero-grid > .bg164-editor-note{
  height:660px !important;
  min-height:660px !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  border-radius:18px !important;
  overflow:hidden !important;
}

/* Left feature: approved copy position, headline now guaranteed to fit. */
.hero-grid > .lead{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  padding:clamp(32px,2.8vw,44px) clamp(28px,2.7vw,38px) 36px !important;
  background:
    linear-gradient(180deg, rgba(40,0,30,.02) 0%, rgba(40,0,30,.12) 42%, rgba(40,0,30,.66) 100%),
    linear-gradient(90deg, rgba(45,0,34,.34) 0%, rgba(45,0,34,.12) 50%, rgba(45,0,34,.04) 100%),
    url('../images/article-unique/shimmer-is-not-the-enemy-after-50.jpg') center/cover no-repeat !important;
}
.hero-grid > .lead:before{
  background:
    radial-gradient(circle at 16% 10%, rgba(255,232,130,.18), transparent 24%),
    radial-gradient(circle at 78% 72%, rgba(255,63,178,.10), transparent 36%) !important;
}
.hero-grid > .lead .kicker{
  margin:0 0 clamp(18px,2vw,26px) !important;
  border:0 !important;
  padding:0 !important;
  background:transparent !important;
  color:#fff8ef !important;
  font-size:clamp(12px,.86vw,14px) !important;
  line-height:1 !important;
}
.hero-grid > .lead h1{
  margin:0 0 clamp(16px,1.8vw,22px) !important;
  max-width:9.4ch !important;
  font-size:clamp(40px,3.05vw,55px) !important;
  line-height:.94 !important;
  letter-spacing:-.055em !important;
  overflow:visible !important;
  text-wrap:balance !important;
}
.hero-grid > .lead p{
  max-width:31ch !important;
  margin:0 !important;
  font-size:clamp(16px,1.12vw,19px) !important;
  line-height:1.36 !important;
}
.hero-grid > .lead .hero-cta{
  margin-top:auto !important;
  width:max-content !important;
  max-width:100% !important;
  white-space:nowrap !important;
  padding:15px 28px !important;
  border-radius:999px !important;
}

/* Middle stack: product-led, brighter images, simple labels, pink separators retained. */
.hero-grid > .column{
  display:grid !important;
  grid-template-rows:repeat(3,minmax(0,1fr)) !important;
  gap:0 !important;
  background:#3b002b !important;
  box-shadow:0 28px 62px rgba(74,0,56,.16) !important;
}
.hero-grid > .column .story.panel{
  position:relative !important;
  min-height:0 !important;
  height:auto !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  padding:clamp(20px,1.8vw,27px) clamp(20px,1.8vw,26px) 20px !important;
  background:
    linear-gradient(90deg, rgba(36,0,26,.80) 0%, rgba(42,0,31,.62) 34%, rgba(42,0,31,.22) 62%, rgba(42,0,31,.04) 100%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.12) 100%),
    var(--panel-img) center/cover no-repeat !important;
}
.hero-grid > .column .story.panel:nth-child(1){
  --panel-img:url('../images/article-unique/charlotte-tilbury-selling-mood.jpg') !important;
  background-position:70% 50% !important;
}
.hero-grid > .column .story.panel:nth-child(2){
  --panel-img:url('../images/article-unique/dubai-gloss-is-not-subtle.jpg') !important;
  background-position:73% 52% !important;
}
.hero-grid > .column .story.panel:nth-child(3){
  --panel-img:url('../images/article-unique/barrier-care-no-longer-boring.jpg') !important;
  background-position:75% 50% !important;
}
.hero-grid > .column .story.panel + .story.panel{
  border-top:2px solid rgba(255,63,178,.78) !important;
  box-shadow:inset 0 8px 14px rgba(255,63,178,.10), 0 -1px 14px rgba(255,63,178,.25) !important;
}
.hero-grid > .column .story.panel .kicker{
  display:block !important;
  width:auto !important;
  max-width:none !important;
  margin:0 0 9px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:rgba(255,248,239,.90) !important;
  font-size:clamp(10px,.75vw,12px) !important;
  line-height:1 !important;
  letter-spacing:.22em !important;
  text-shadow:0 2px 11px rgba(0,0,0,.40) !important;
}
.hero-grid > .column .story.panel h2{
  max-width:12.7ch !important;
  margin:0 0 9px !important;
  font-size:clamp(24px,1.85vw,32px) !important;
  line-height:.96 !important;
  letter-spacing:-.048em !important;
  text-shadow:0 3px 16px rgba(20,0,15,.55) !important;
  overflow:visible !important;
}
.hero-grid > .column .story.panel p{
  max-width:27ch !important;
  margin:0 !important;
  font-size:clamp(12px,.86vw,13px) !important;
  line-height:1.28 !important;
  color:rgba(255,248,239,.94) !important;
  text-shadow:0 2px 9px rgba(20,0,15,.52) !important;
}

/* Right Editor's Note: live HTML, solid glow, but no clipping. */
.hero-grid > .bg164-editor-note{
  display:flex !important;
  flex-direction:column !important;
  padding:clamp(30px,2.55vw,38px) clamp(26px,2.4vw,34px) 32px !important;
  background:
    radial-gradient(circle at 78% 22%,rgba(255,63,178,.25),transparent 35%),
    linear-gradient(150deg,#3b002b 0%,#850060 58%,#3b002b 100%) !important;
  box-shadow:0 28px 62px rgba(74,0,56,.20), inset 0 0 80px rgba(255,63,178,.08) !important;
}
.bg164-editor-pill{
  margin:0 0 clamp(22px,2.2vw,30px) !important;
  min-height:40px !important;
  padding:0 22px !important;
  font-size:clamp(12px,.82vw,15px) !important;
}
.bg164-editor-title h2{
  display:block !important;
  width:100% !important;
  max-width:12.2ch !important;
  margin:0 0 clamp(16px,1.7vw,22px) !important;
  padding:0 !important;
  font-size:clamp(36px,2.55vw,46px) !important;
  line-height:.98 !important;
  letter-spacing:-.048em !important;
  overflow:visible !important;
}
.bg164-editor-title h2 span{
  display:block !important;
  white-space:normal !important;
}
.bg164-editor-title strong{
  display:block !important;
  margin:0 0 clamp(18px,1.8vw,24px) !important;
  font-size:clamp(13px,.9vw,16px) !important;
  white-space:nowrap !important;
}
.bg164-editor-list{
  display:grid !important;
  gap:clamp(12px,1vw,16px) !important;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
.bg164-editor-list li{
  position:relative !important;
  margin:0 !important;
  padding-left:30px !important;
}
.bg164-editor-list li::before{
  left:0 !important;
  top:.45em !important;
  width:11px !important;
  height:11px !important;
}
.bg164-editor-list a{
  max-width:none !important;
  font-size:clamp(13px,.98vw,17px) !important;
  line-height:1.24 !important;
  font-weight:800 !important;
}

/* Vivienne: restore the intended pull-quote scale, never shrink it into body copy. */
.vivienne-says{
  width:min(var(--bg-home-max), calc(100vw - var(--bg-page-gutter))) !important;
  margin:clamp(28px,3vw,44px) auto clamp(28px,3.2vw,48px) !important;
  padding:clamp(26px,2.8vw,34px) clamp(30px,3.5vw,46px) !important;
  overflow:hidden !important;
}
.vivienne-says p{
  margin:10px 0 14px !important;
  font-size:clamp(34px,3.6vw,54px) !important;
  line-height:1 !important;
  letter-spacing:-.055em !important;
  max-width:28ch !important;
  text-wrap:balance !important;
}
.vivienne-says a{white-space:nowrap !important;}

/* Clara and newsletter keep the designed width/spacing without runtime shrink hacks. */
.bg164-facevalue,
.newsletter{
  width:min(var(--bg-home-max), calc(100vw - var(--bg-page-gutter))) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.newsletter{
  display:grid !important;
  grid-template-columns:minmax(0,1.18fr) minmax(330px,.62fr) !important;
  gap:clamp(34px,4vw,64px) !important;
  align-items:center !important;
  padding:clamp(36px,4.5vw,62px) !important;
  overflow:hidden !important;
}
.newsletter > div:first-child{min-width:0 !important; max-width:none !important;}
.newsletter h2[data-home-slot="newsletter.headline"]{
  margin:0 0 20px !important;
  max-width:none !important;
  width:100% !important;
  font-size:clamp(48px,3.55vw,66px) !important;
  line-height:.98 !important;
  letter-spacing:-.052em !important;
  text-wrap:normal !important;
}
.newsletter h2[data-home-slot="newsletter.headline"] > span{
  display:block !important;
  white-space:nowrap !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;
  border-radius:999px !important;
}
.newsletter .form-note,
.newsletter-consent{
  max-width:430px !important;
  margin-left:auto !important;
}

/* Last-resort visual indicators are for local QA only; never show dashed boxes live. */
.bg-copy-over-limit{outline:0 !important;}
.bg-fit-guarded{font-size:inherit !important;}

/* Collapse before the three-card row can become cramped. */
@media (max-width:1180px){
  .home-beauty-hero-copy{
    left:34px !important;
    width:min(560px,50%) !important;
  }
  .hero-grid{
    grid-template-columns:1fr 1fr !important;
  }
  .hero-grid > .lead{
    grid-column:1 / -1 !important;
    height:560px !important;
    min-height:560px !important;
  }
  .hero-grid > .column,
  .hero-grid > .bg164-editor-note{
    height:auto !important;
    min-height:660px !important;
  }
  .bg164-editor-title h2{font-size:clamp(40px,5vw,52px) !important; max-width:15ch !important;}
  .bg164-editor-list a{font-size:18px !important; max-width:none !important;}
  .newsletter{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  .newsletter .form,
  .newsletter .form-note,
  .newsletter-consent{
    max-width:720px !important;
    margin-left:0 !important;
  }
}
@media (max-width:900px){
  .home-beauty-hero-copy{
    left:22px !important;
    right:22px !important;
    width:auto !important;
  }
  .hero-grid{
    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{
    height:auto !important;
    min-height:0 !important;
  }
  .hero-grid > .column{
    gap:14px !important;
    overflow:visible !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  .hero-grid > .column .story.panel{
    min-height:230px !important;
    border-radius:18px !important;
  }
  .hero-grid > .column .story.panel + .story.panel{
    border-top:0 !important;
  }
  .bg164-editor-title h2{font-size:clamp(36px,10vw,48px) !important;}
  .bg164-editor-list a{font-size:16.5px !important;}
  .vivienne-says,
  .bg164-facevalue,
  .newsletter{width:min(100% - 32px, var(--bg-home-max)) !important;}
  .vivienne-says p{font-size:clamp(30px,8vw,48px) !important;}
  .newsletter h2[data-home-slot="newsletter.headline"]{font-size:clamp(38px,8.5vw,56px) !important;}
  .newsletter h2[data-home-slot="newsletter.headline"] > span{white-space:normal !important;}
}
@media (max-width:560px){
  .hero-grid > .lead,
  .hero-grid > .bg164-editor-note,
  .newsletter{padding:26px 20px !important;}
  .hero-grid > .lead h1{font-size:clamp(38px,10vw,52px) !important;}
}