/* Hush after dark: the four brand colours, with light and shadow. */
.announcement {
  background: #dba5bc;
  color: #1d1a1d;
  height: 32px;
  letter-spacing: .65px;
}

.site-header {
  color: #fefefe;
  background: #1d1a1d;
  border-bottom-color: #fefefe12;
  height: 92px;
}

.site-header nav a { color: #fefefebf; }
.site-header nav a:hover { color: #dba5bc; }
.site-header .privacy-toggle { color: #fefefebf; }
.site-header .privacy-toggle[aria-pressed="true"] { color: #dba5bc; }
.site-header .bag-button span { border-color: #fefefe42; }
.site-header :is(a, button):focus-visible,
.hero :is(a, button):focus-visible,
.closing a:focus-visible,
.site-footer :is(a, button):focus-visible { outline-color: #dba5bc; }

.hero {
  position: relative;
  isolation: isolate;
  max-width: none;
  min-height: 690px;
  padding: 35px max(5%, calc((100vw - 1440px) / 2)) 45px;
  grid-template-columns: 1fr 1.04fr;
  gap: 10px;
  color: #fefefe;
  background:
    radial-gradient(ellipse at 78% 48%, #dba5bc16 0%, #dba5bc00 48%),
    radial-gradient(ellipse at 96% 96%, #e29ea00b 0%, #e29ea000 40%),
    #1d1a1d;
}

.hero-copy { position: relative; z-index: 2; min-width: 0; padding-bottom: 6px; }
.hero .eyebrow { color: #dba5bc; font-size: 9px; letter-spacing: 2.1px; margin-bottom: 30px; }
.hero .small-line { width: 35px; background: #dba5bc; }
.hero h1 {
  font-size: clamp(58px, 5.8vw, 88px);
  line-height: 1.04;
  letter-spacing: -3.5px;
  margin-bottom: 27px;
}
.hero h1 em { color: #dba5bc; }
.hero h1 em::after { display: none; }
.hero-description { color: #fefefea6; font-size: 14px; line-height: 1.9; margin-bottom: 31px; }
.hero-cta { gap: 25px; }
.hero .button-primary,
.closing .button-primary { --button: #dba5bc; color: #1d1a1d; padding: 18px 25px; border-radius: 5px; }
.hero .text-link { color: #fefefed4; border-bottom-color: #dba5bc70; padding-bottom: 8px; }
.hero .text-link:hover { color: #dba5bc; }
.hero-footnote { color: #fefefe8f; margin-top: 28px; font-size: 10px; }
.hero-footnote svg { color: #dba5bc; }
.hero-index {
  color: #fefefe54;
  font-size: 8px;
  letter-spacing: 1.9px;
  line-height: 1.7;
  margin-top: 56px;
}

.hero-art { min-width: 0; height: 600px; }
.hero-art::before { display: none; }
.hero-aura {
  position: absolute;
  inset: 1% -8% 4%;
  background: radial-gradient(ellipse at 50% 48%, #e29ea024, #dba5bc0e 43%, #dba5bc00 69%);
  pointer-events: none;
}
.hero-pedestal {
  position: absolute;
  width: 68%;
  height: 15%;
  left: 16%;
  bottom: 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #dba5bc16, #dba5bc07 45%, #dba5bc00 72%);
  pointer-events: none;
}
.mascot-stage { width: 100%; max-width: 580px; transform: translateY(-13px); }
#mascot-image { filter: drop-shadow(0 25px 30px #00000040); }
.discreet #mascot-image { filter: drop-shadow(0 25px 30px #00000040); }
.hero-art-label {
  position: absolute;
  z-index: 2;
  left: 5%;
  bottom: 73px;
  font-family: var(--serif);
  font-size: 25px;
  font-style: italic;
  color: #fefefec7;
  line-height: 1.3;
}
.hero-art-label span {
  display: block;
  color: #fefefe70;
  font-family: var(--sans);
  font-size: 8px;
  font-style: normal;
  letter-spacing: .7px;
  margin-top: 8px;
}
.mascot-caption { bottom: 4px; z-index: 2; color: #fefefe8f; font-size: 9px; letter-spacing: .3px; }
.mascot-caption .live-dot { background: #e29ea0; box-shadow: 0 0 9px #e29ea040; }
.mascot-caption button { border-color: #dba5bc45; color: #fefefec7; padding: 6px 10px; }
.mascot-caption button:hover { background: #dba5bc15; }
.discreet .mascot-stage,
.discreet .hero-art-label { visibility: hidden; }
.discreet .hero-art::after {
  content: 'A moment.\A Just for you.';
  position: absolute;
  inset: 0 0 45px;
  display: grid;
  place-content: center;
  color: #dba5bc;
  font-family: var(--serif);
  font-size: clamp(38px, 4vw, 58px);
  font-style: italic;
  line-height: 1.15;
  letter-spacing: -1.6px;
  text-align: center;
  white-space: pre-line;
  pointer-events: none;
}

.values-strip {
  background: #f8edf2;
  border-top-color: #dba5bc38;
  border-bottom-color: #dba5bc38;
  color: #1d1a1db3;
  padding-top: 25px;
  padding-bottom: 25px;
  font-size: 10px;
  letter-spacing: .2px;
}
.values-strip svg { color: #1d1a1d91; }
.values-strip i { background: #dba5bc70; }

.collection { padding-top: 87px; padding-bottom: 85px; }
.collection .section-heading { margin-bottom: 37px; }
.collection .section-heading h1 { line-height: 1.15; margin-bottom: 0; }
.collection .section-heading h1 em::after { display: none; }
.collection .section-heading .eyebrow { color: #1d1a1d91; font-size: 9px; letter-spacing: 1.7px; }
.collection .section-heading :is(h1,h2) { font-size: clamp(40px, 3.9vw, 58px); letter-spacing: -2px; }
.filter-tabs button { border-color: #1d1a1d20; }
.filter-tabs button:hover { border-color: #1d1a1d60; }
.filter-tabs button[aria-pressed="true"] { border-color: #1d1a1d; }
.product-card .product-visual {
  border: 1px solid #1d1a1d06;
  border-radius: 6px;
  box-shadow: inset 0 0 45px #1d1a1d04;
}
.product-card.plum .product-visual { background: radial-gradient(ellipse at 45% 31%, #fefefe, #f3dde7 80%); }
.product-card.rose .product-visual { background: radial-gradient(ellipse at 45% 31%, #fdf6f6, #f2d7d8 80%); }
.product-card.sage .product-visual { background: radial-gradient(ellipse at 45% 31%, #fefefe, #e8e5e8 80%); }
.product-card.sand .product-visual { background: radial-gradient(ellipse at 45% 31%, #fefefe, #eee5e9 80%); }
.product-visual img { filter: drop-shadow(0 12px 11px #1d1a1d0c); }
.product-visual:hover img { transform: translateY(-4px) scale(1.035); }
.product-badge { background: #fefefe99; letter-spacing: .4px; }
.product-add { box-shadow: 0 4px 12px #1d1a1d0c; }
.product-info { padding-top: 20px; }
.product-title { font-size: 25px; }
.catalogue-note { padding-top: 4px; }

.approach { padding-bottom: 90px; gap: 8%; }
.approach-art {
  height: 530px;
  border-radius: 5px;
  background: #1d1a1d;
  isolation: isolate;
  align-items: stretch;
}
.approach-art::before { display: none; }
.approach-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #1d1a1d00 25%, #1d1a1d26 50%, #1d1a1dad 100%);
  pointer-events: none;
}
.satin-image { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.editorial-caption { position: absolute; z-index: 1; bottom: 39px; left: 40px; color: #fefefe; }
.editorial-caption > span { font-size: 8px; letter-spacing: 2px; color: #fefefeb8; }
.editorial-caption p { font-family: var(--serif); font-size: 49px; line-height: 1.04; letter-spacing: -1.8px; margin: 17px 0 0; }
.editorial-caption em { color: #f5dce6; }
.approach-copy .eyebrow { color: #1d1a1d91; font-size: 9px; letter-spacing: 1.8px; }
.approach-copy h2 { font-size: clamp(42px, 4.2vw, 62px); line-height: 1.05; letter-spacing: -2px; margin-bottom: 27px; }
.approach-copy > p { max-width: 400px; font-size: 13px; line-height: 1.9; margin-bottom: 30px; }
.approach-detail { margin-bottom: 21px; }
.approach-detail > span { color: #1d1a1d80; }
.approach-detail h3 { font-size: 12px; }
.approach-detail p { font-size: 11px; }
.approach-copy > .text-link { margin-top: 13px; }

.faq { padding-top: 74px; padding-bottom: 88px; }
.faq-intro .eyebrow { color: #1d1a1d91; font-size: 9px; letter-spacing: 1.8px; }
.faq-intro h2 { font-size: 48px; }
.faq-list summary { padding-top: 24px; padding-bottom: 24px; }

.closing {
  padding: 74px 5% 80px;
  color: #fefefe;
  background: radial-gradient(ellipse at 50% 110%, #dba5bc22, #dba5bc00 65%), #1d1a1d;
  border-color: #fefefe14;
}
.closing > .eyebrow { color: #dba5bc; font-size: 9px; letter-spacing: 2px; }
.closing > p { font-size: clamp(44px, 4.3vw, 65px); letter-spacing: -2.3px; line-height: 1.08; margin: 22px 0 30px; }
.closing > p em { color: #dba5bc; }
.closing .button { font-size: 11px; }
.site-footer { color: #fefefebd; background: #1d1a1d; padding-top: 39px; padding-bottom: 27px; }
.footer-main { border-bottom-color: #fefefe16; padding-bottom: 30px; }
.footer-main p { color: #fefefe7a; }
.footer-main a:hover, .footer-main button:hover { color: #dba5bc; }
.adult-label { color: #fefefe91; border-color: #fefefe30; }
.footer-bottom { color: #fefefe65; padding-top: 23px; }

@media (max-width: 1100px) {
  .site-header { height: 82px; }
  .hero { min-height: 650px; padding: 30px 4% 38px; }
  .hero h1 { font-size: clamp(55px, 6.4vw, 72px); letter-spacing: -2.8px; }
  .hero-art { height: 560px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: 1.7px; }
  .hero-description { font-size: 13px; }
  .hero-cta { gap: 20px; }
  .hero .button-primary { padding: 17px 19px; }
  .hero-index { margin-top: 42px; }
  .hero-art-label { left: 3%; bottom: 74px; font-size: 23px; }
  .collection { padding-top: 67px; padding-bottom: 65px; }
  .approach-art { height: 470px; }
  .editorial-caption { left: 32px; bottom: 33px; }
  .editorial-caption p { font-size: 43px; }
  .approach { padding-bottom: 70px; }
}

@media (max-width: 800px) {
  .hero { min-height: 565px; }
  .hero h1 { font-size: 50px; letter-spacing: -2.6px; }
  .hero .eyebrow { letter-spacing: 1.3px; gap: 8px; margin-bottom: 25px; }
  .hero .small-line { width: 23px; }
  .hero-art { height: 490px; }
  .hero-description { font-size: 12px; }
  .hero-cta { gap: 16px; }
  .hero-footnote { font-size: 9px; }
  .hero-index { font-size: 7px; letter-spacing: 1.4px; }
  .hero-art-label { font-size: 21px; left: 2%; bottom: 67px; }
  .hero-art-label span { font-size: 7px; letter-spacing: .3px; }
  .mascot-caption { font-size: 8px; gap: 5px; }
  .mascot-caption button { font-size: 8px; padding: 5px 8px; }
  .collection .section-heading :is(h1,h2) { font-size: 43px; }
  .approach-art { height: 445px; }
  .editorial-caption { left: 25px; bottom: 28px; }
  .editorial-caption p { font-size: 38px; }
  .approach-copy h2 { font-size: 42px; }
  .approach-copy > p { font-size: 12px; }
  .faq-intro h2 { font-size: 40px; }
  .faq { padding-top: 55px; padding-bottom: 65px; }
}

@media (max-width: 700px) {
  .site-header nav { display: none; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding: 45px 6% 22px; gap: 0; }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: 58px; letter-spacing: -2.6px; }
  .hero-description { font-size: 13px; }
  .hero-index { margin-top: 28px; font-size: 7px; }
  .hero-art { width: 100%; max-width: 440px; height: 430px; justify-self: center; margin-top: 6px; }
  .mascot-stage { width: 100%; max-width: 400px; transform: translateY(-13px); }
  .hero-art-label { left: 0; bottom: 65px; font-size: 22px; }
  .mascot-caption { font-size: 9px; bottom: 0; }
  .approach { grid-template-columns: 1fr; gap: 36px; padding-top: 8px; padding-bottom: 55px; }
  .approach-art { height: 430px; }
  .approach-copy h2 { font-size: 48px; }
  .approach-copy > p { max-width: 100%; }
}

@media (max-width: 560px) {
  .announcement { height: 30px; font-size: 8px; letter-spacing: .2px; }
  .site-header { height: 75px; }
  .hero { padding-top: 42px; padding-bottom: 22px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: 1.6px; margin-bottom: 23px; }
  .hero h1 { font-size: clamp(42px, 12.7vw, 52px); line-height: 1.05; letter-spacing: -2.4px; margin-bottom: 24px; }
  .hero-description { font-size: 13px; line-height: 1.85; margin-bottom: 25px; }
  .hero-cta { gap: 21px; }
  .hero .button-primary { padding: 17px 19px; font-size: 11px; }
  .hero .text-link { font-size: 10px; }
  .hero-footnote { margin-top: 23px; font-size: 9px; }
  .hero-index { margin-top: 29px; letter-spacing: 1.6px; }
  .hero-art { height: 400px; margin-top: 0; }
  .mascot-stage { width: 100%; max-width: 350px; transform: translateY(-10px); }
  .hero-aura { inset: 0 -15% 0; }
  .hero-art-label { bottom: 54px; font-size: 20px; }
  .hero-art-label span { font-size: 7px; margin-top: 6px; }
  .mascot-caption { font-size: 8px; }
  .mascot-caption button { margin-left: 3px; padding: 6px 9px; }
  .values-strip { padding: 21px 6%; gap: 14px 28px; font-size: 9px; }
  .collection { padding-top: 49px; padding-bottom: 46px; }
  .collection .section-heading { margin-bottom: 27px; }
  .collection .section-heading .eyebrow { font-size: 8px; letter-spacing: 1.3px; }
  .collection .section-heading :is(h1,h2) { font-size: 38px; letter-spacing: -1.7px; }
  .product-card .product-visual { border-radius: 5px; }
  .product-info { padding-top: 14px; }
  .product-title { font-size: 22px; }
  .approach { padding-top: 8px; padding-bottom: 48px; gap: 32px; }
  .approach-art { height: 390px; }
  .editorial-caption { left: 27px; bottom: 30px; }
  .editorial-caption > span { font-size: 7px; letter-spacing: 1.6px; }
  .editorial-caption p { font-size: 43px; margin-top: 15px; }
  .approach-copy .eyebrow { font-size: 8px; letter-spacing: 1.6px; }
  .approach-copy h2 { font-size: 44px; letter-spacing: -1.9px; margin-bottom: 23px; }
  .approach-copy > p { font-size: 12px; margin-bottom: 25px; }
  .approach-detail { margin-bottom: 20px; }
  .faq { padding-top: 45px; padding-bottom: 49px; }
  .faq-intro .eyebrow { font-size: 8px; }
  .faq-intro h2 { font-size: 40px; }
  .faq-list summary { padding-top: 21px; padding-bottom: 21px; }
  .closing { padding: 52px 6% 56px; }
  .closing > .eyebrow { font-size: 8px; letter-spacing: 1.7px; }
  .closing > p { font-size: 43px; letter-spacing: -1.8px; margin: 20px 0 28px; }
  .closing .button { padding: 17px 22px; font-size: 11px; }
  .site-footer { padding-top: 30px; padding-bottom: 24px; }
  .footer-main { padding-bottom: 25px; }
  .footer-bottom { padding-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .product-visual:hover img { transform: none; }
}