@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Jost:wght@400;500;600&display=swap');
:root { --ivory:#f7f4ed; --paper:#fffdf8; --beige:#e8dfd2; --blush:#dec9c3; --champagne:#bba383; --espresso:#322b27; --muted:#756a62; --line:#d8cfc4; --serif:'DM Serif Display',Georgia,serif; --sans:'Jost',Arial,sans-serif; --width:1320px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--espresso); background:var(--ivory); font:400 1rem/1.6 var(--sans); } body.overlay-open { overflow:hidden; }
h1,h2,h3,p { margin:0; } h1,h2 { font-family:var(--serif); font-weight:400; line-height:1.06; letter-spacing:-.03em; } h2 { font-size:clamp(2.7rem,4.5vw,4.8rem); } em { font-weight:400; } a { color:inherit; text-decoration:none; } button,input { font:inherit; } button { cursor:pointer; } button:disabled { cursor:default; opacity:.45; } button,a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid #725545; outline-offset:5px; } ::selection { background:var(--blush); } [hidden] { display:none!important; } section[id] { scroll-margin-top:24px; }
.wrap { width:min(calc(100% - 100px),var(--width)); margin-inline:auto; } .section { padding-block:95px; } .eyebrow { font-size:.66rem; font-weight:500; letter-spacing:.18em; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; z-index:100; top:12px; left:12px; padding:12px 20px; background:var(--paper); transform:translateY(-160%); } .skip-link:focus { transform:none; }
.concept-bar { display:flex; justify-content:space-between; gap:20px; padding:8px 28px; background:var(--espresso); color:var(--ivory); font-size:.61rem; letter-spacing:.05em; } .concept-bar a { white-space:nowrap; }
.announcement { padding:9px 20px; text-align:center; background:#e5d6c5; font-size:.6rem; letter-spacing:.13em; } .announcement span { letter-spacing:.02em; color:#665a50; }
.site-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:35px; min-height:106px; padding:22px 40px; border-bottom:1px solid var(--line); }
.wordmark { display:inline-flex; flex-direction:column; text-align:center; font-family:var(--serif); font-size:2rem; line-height:1; letter-spacing:.08em; } .wordmark span { font:400 .56rem var(--sans); letter-spacing:.44em; margin-top:9px; }
.desktop-nav { display:flex; align-items:center; gap:23px; font-size:.61rem; letter-spacing:.1em; } .desktop-nav a { padding-block:10px; border-bottom:1px solid transparent; } .desktop-nav a:hover { border-color:var(--espresso); }
.header-tools { display:flex; justify-content:flex-end; align-items:center; gap:13px; } svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.3; }
.icon-button { display:grid; place-items:center; width:44px; height:44px; padding:0; background:none; border:0; color:var(--espresso); } .bag-toggle { display:flex; align-items:center; gap:9px; min-height:44px; background:none; border:0; font-size:.65rem; letter-spacing:.05em; color:var(--espresso); padding:0 6px; } .mobile-toggle { display:none; }
.hero { display:grid; grid-template-columns:1fr 1.05fr; min-height:660px; } .hero-copy { padding:90px max(40px,calc((100vw - 1320px)/2)); padding-right:40px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
h1 { font-size:clamp(4.5rem,7vw,7.8rem); margin-top:22px; } .hero-copy > p:not(.eyebrow) { margin-top:28px; font-size:1.05rem; color:var(--muted); } .hero-actions { display:flex; flex-wrap:wrap; gap:20px; align-items:center; margin-top:32px; } .hero-footnote { margin-top:40px; font-size:.62rem; color:var(--muted); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:25px; min-height:50px; padding:15px 25px; background:var(--espresso); color:var(--ivory); border:1px solid var(--espresso); font-size:.65rem; letter-spacing:.1em; transition:background .25s,color .25s; } .button:hover { background:#55443a; }
.text-link { display:inline-block; padding:7px 0; border:0; border-bottom:1px solid var(--espresso); background:none; font-size:.61rem; letter-spacing:.13em; color:var(--espresso); } .text-link:hover { color:#8d6753; }
.image-container { position:relative; overflow:hidden; isolation:isolate; background:#e6ddd1; }
.hero-beauty { background:#d9c7b9; min-height:660px; }
.image-caption { position:absolute; bottom:25px; left:30px; font-size:.58rem; letter-spacing:.14em; z-index:3; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:35px; } .section-heading h2 { margin-top:15px; } .section-heading > p { font-size:.88rem; color:var(--muted); }
.collection-toolbar { display:flex; justify-content:space-between; gap:25px; align-items:center; border-bottom:1px solid var(--line); margin-bottom:30px; } .filters { display:flex; gap:30px; } .filters button { padding:16px 0; min-height:48px; border:0; border-bottom:2px solid transparent; background:none; color:var(--muted); font-size:.65rem; letter-spacing:.1em; } .filters button[aria-pressed="true"] { color:var(--espresso); border-bottom-color:var(--espresso); } #product-count { font-size:.7rem; color:var(--muted); }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:45px 25px; } .product-card .image-container { aspect-ratio:4/5; } .product-index { position:absolute; top:18px; left:18px; font-size:.55rem; letter-spacing:.12em; color:#716257; }
.product-serum { background:#ded1bd; } .product-cream { background:#e9e1d6; } .product-mist { background:#ddd4cd; } .product-body { background:#dec9c3; } .product-oil { background:#ded5c3; } .product-lip { background:#d8c9c4; }
.product-info { padding-top:18px; } .product-info > p { font-size:.56rem; color:var(--muted); letter-spacing:.15em; } .product-info > div { display:flex; align-items:baseline; justify-content:space-between; gap:15px; margin-top:5px; } .product-info h3 { font-weight:400; font-size:1.03rem; } .product-info > div > span { font-size:.87rem; white-space:nowrap; } .add-button { display:flex; justify-content:space-between; align-items:center; min-height:46px; width:100%; padding:13px 0; margin-top:13px; background:none; border:0; border-top:1px solid var(--line); font-size:.59rem; letter-spacing:.13em; color:var(--espresso); transition:padding .2s,background .2s; } .add-button > span { font-size:1.1rem; } .add-button:hover { padding-inline:12px; background:#ece6dd; } .shop-demo-note { color:var(--muted); font-size:.65rem; margin-top:30px; }
.product-card.filter-enter { animation:product-in .35s ease both; } .product-card.filter-leave { animation:product-out .16s ease both; pointer-events:none; } @keyframes product-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } @keyframes product-out { to { opacity:0; transform:translateY(5px); } }
.editorial { display:grid; grid-template-columns:1.1fr 1fr; background:#eae4da; } .editorial-beauty { min-height:660px; background:#cbb5a6; }
.editorial-copy { padding:90px 14%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; } .editorial h2 { font-size:clamp(3.7rem,6vw,6.5rem); margin-top:25px; } .editorial-copy > p:not(.eyebrow) { max-width:420px; color:var(--muted); font-size:.89rem; margin-top:25px; } .editorial-copy .text-link { margin-top:25px; } .editorial-note { font-size:.61rem; color:var(--muted); margin-top:25px; }
.ritual-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; } .ritual-card { position:relative; display:block; } .ritual-card .image-container { height:480px; } .ritual-skin { background:#c7b6a5; } .ritual-body { background:#ccb7ae; } .ritual-title { padding-top:20px; position:relative; } .ritual-title > span:first-child { font-size:.61rem; letter-spacing:.15em; } .ritual-title h3 { font:400 3.2rem/1.2 var(--serif); margin-top:8px; } .ritual-arrow { position:absolute; bottom:12px; right:0; font-size:2rem; transition:transform .2s; } .ritual-card:hover .ritual-arrow { transform:translate(4px,-4px); }
.feature { display:grid; grid-template-columns:1fr 1fr; background:#e7dfd1; } .feature-copy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:80px max(40px,calc((100vw - 1320px)/2)); padding-right:60px; } .feature h2 { margin-top:25px; } .feature h3 { font-weight:400; font-size:1.1rem; margin-top:25px; } .feature h3 span { display:inline-block; margin-left:20px; font-size:.9rem; } .feature-copy > p:not(.eyebrow) { color:var(--muted); font-size:.88rem; max-width:390px; margin-top:18px; } .feature-copy .button { margin-top:28px; } .feature-copy > p.feature-note { font-size:.6rem; } .feature-image { min-height:570px; background:#d9cab5; }
.values { display:grid; grid-template-columns:repeat(3,1fr); text-align:center; border-bottom:1px solid var(--line); padding-block:40px; font-size:.65rem; letter-spacing:.15em; }
.newsletter { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; } .newsletter h2 { font-size:clamp(2.6rem,4vw,4rem); margin-top:15px; } .newsletter > div > p:not(.eyebrow) { color:var(--muted); font-size:.87rem; margin-top:20px; } fieldset { border:0; padding:0; margin:0; min-width:0; } .newsletter-input { display:flex; border-bottom:1px solid var(--espresso); } .newsletter-input input { flex:1; min-width:0; padding:15px 0; border:0; background:none; color:var(--espresso); font-size:.9rem; } .newsletter-input button { border:0; background:none; min-width:70px; color:var(--espresso); font-size:.65rem; letter-spacing:.1em; } .newsletter-note { color:var(--muted); font-size:.62rem; margin-top:12px; } #newsletter-status { font-size:.8rem; margin-top:16px; color:#4e604a; }
.site-footer { background:#e9e1d6; padding-top:65px; } .footer-grid { display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:35px; padding-bottom:60px; } .footer-brand > p { font-size:.76rem; color:var(--muted); margin-top:25px; } .footer-grid nav,.footer-column { display:flex; flex-direction:column; align-items:flex-start; gap:11px; font-size:.75rem; } .footer-grid h3 { font:500 .59rem var(--sans); letter-spacing:.15em; margin-bottom:10px; } .footer-column button { background:none; border:0; color:inherit; font:inherit; padding:0; text-align:left; } .footer-grid a:hover,.footer-column button:hover { text-decoration:underline; text-underline-offset:4px; } .footer-bottom { display:flex; justify-content:space-between; gap:30px; border-top:1px solid #cbbdae; padding-block:25px; font-size:.6rem; color:var(--muted); } .footer-bottom > a { align-self:center; letter-spacing:.06em; }
dialog { color:var(--espresso); background:var(--paper); border:0; } dialog::backdrop { background:#322b2777; } .drawer { position:fixed; margin:0 0 0 auto; inset:0 0 0 auto; width:min(100%,480px); height:100dvh; max-height:100dvh; max-width:100vw; padding:30px; overflow-y:auto; } .drawer[open] { display:flex; flex-direction:column; animation:drawer-in .25s ease; } @keyframes drawer-in { from { transform:translateX(100%); } to { transform:none; } }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; } .dialog-heading h2 { font-size:2.2rem; } .close-button { width:44px; height:44px; background:none; border:0; font-size:1.9rem; color:var(--espresso); flex-shrink:0; } .dialog-note { font-size:.7rem; color:var(--muted); } .menu-drawer nav { display:flex; flex-direction:column; margin-block:30px; } .menu-drawer nav a { font:400 2rem var(--serif); padding:12px 0; border-bottom:1px solid var(--line); } .menu-drawer .text-link { align-self:flex-start; margin-bottom:30px; }
.bag-items { padding-block:20px; } .empty-bag { padding:35px 0; color:var(--muted); } .empty-bag h3 { font:400 1.6rem var(--serif); color:var(--espresso); margin-bottom:10px; } .empty-bag p { font-size:.85rem; }
.bag-item { display:grid; grid-template-columns:74px 1fr; gap:16px; padding-block:20px; border-bottom:1px solid var(--line); } .bag-swatch { width:74px; min-height:100px; position:relative; overflow:hidden; } .bag-item h3 { font-size:.92rem; font-weight:400; } .bag-item-price { font-size:.78rem; margin-top:4px; } .quantity-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-top:12px; } .quantity-controls { display:flex; align-items:center; border:1px solid var(--line); } .quantity-controls button { background:none; border:0; width:44px; height:44px; color:var(--espresso); font-size:1.2rem; } .quantity-controls output { min-width:28px; text-align:center; font-size:.8rem; } .remove-item { min-height:44px; border:0; background:none; padding:6px 0; color:var(--muted); font-size:.7rem; text-decoration:underline; }
.bag-summary { margin-top:auto; padding-top:25px; } .subtotal-row { display:flex; justify-content:space-between; gap:20px; font-size:.8rem; } .subtotal-row strong { font-weight:500; } .bag-summary > p { color:var(--muted); font-size:.64rem; margin-top:10px; } .bag-summary .button { margin-top:22px; width:100%; } .continue-button { margin-top:15px; width:100%; min-height:44px; background:none; border:0; color:var(--espresso); font-size:.62rem; letter-spacing:.1em; } .bag-summary > p.demo-message { background:#eae5db; color:var(--espresso); padding:15px; font-size:.8rem; }
.utility-dialog { width:min(calc(100% - 32px),580px); padding:35px; max-height:85dvh; overflow-y:auto; } .utility-dialog > p { font-size:.9rem; color:var(--muted); } .utility-dialog .text-link { margin-top:25px; } .utility-dialog label { display:block; font-size:.65rem; letter-spacing:.1em; margin-top:25px; } #search-input { width:100%; padding:14px 0; background:none; border:0; border-bottom:1px solid var(--espresso); color:var(--espresso); } #search-count { margin-top:15px; font-size:.7rem; } .search-result { display:flex; justify-content:space-between; width:100%; min-height:60px; gap:20px; text-align:left; padding:15px 0; border:0; border-bottom:1px solid var(--line); background:none; color:var(--espresso); font-size:.88rem; } .search-result:hover { color:#8d6753; }
.reveal { opacity:0; transform:translateY(15px); transition:opacity .6s ease,transform .6s ease; } .reveal.visible { opacity:1; transform:none; }
@media (max-width:1100px) {
  .site-header { grid-template-columns:1fr auto 1fr; padding:20px 28px; min-height:90px; } .desktop-nav { display:none; } .mobile-toggle { display:grid; }
  .wrap { width:calc(100% - 64px); } .hero-copy { padding:70px 32px; } .hero,.hero-beauty { min-height:600px; } .hero-actions { align-items:flex-start; flex-direction:column; }
  .editorial-copy { padding:65px 10%; } .feature-copy { padding:65px 32px; } .footer-grid { grid-template-columns:1.5fr 1fr 1fr; row-gap:35px; } .newsletter { gap:45px; } .ritual-card .image-container { height:420px; }
}
@media (max-width:760px) {
  .wrap { width:calc(100% - 36px); } .section { padding-block:60px; } .concept-bar { padding:8px 18px; font-size:.55rem; align-items:center; } .concept-bar > span { max-width:210px; } .announcement { font-size:.52rem; padding-inline:10px; } .announcement span { display:block; }
  .site-header { padding:15px 12px; min-height:80px; gap:6px; } .wordmark { font-size:1.65rem; } .header-tools { gap:2px; } .account-button { display:none; } .bag-toggle > span { font-size:.56rem; } .bag-toggle svg { display:none; }
  .hero { grid-template-columns:1fr; min-height:0; } .hero-copy { padding:55px 24px 45px; } h1 { font-size:clamp(4rem,14vw,6rem); } .hero-actions { flex-direction:row; gap:18px; align-items:center; } .hero-footnote { margin-top:25px; } .hero-beauty { min-height:420px; } .image-caption { left:20px; font-size:.53rem; }
  .section-heading { flex-direction:column; align-items:flex-start; gap:20px; } .section-heading > p { font-size:.82rem; } .collection-toolbar { align-items:flex-start; gap:10px; flex-direction:column; padding-bottom:15px; } .filters { gap:28px; } #product-count { font-size:.62rem; }
  .product-grid { grid-template-columns:1fr 1fr; gap:30px 14px; } .product-info > div { flex-wrap:wrap; gap:4px 12px; } .product-info h3 { font-size:.86rem; } .product-info > div > span { font-size:.8rem; } .product-index { font-size:.47rem; left:10px; top:12px; }
  .editorial { grid-template-columns:1fr; } .editorial-beauty { min-height:420px; } .editorial-copy { padding:60px 24px; } .editorial h2 { font-size:4.5rem; } .ritual-grid { gap:18px; } .ritual-card .image-container { height:310px; } .ritual-title > span:first-child { font-size:.5rem; } .ritual-title h3 { font-size:2.8rem; } .ritual-arrow { font-size:1.6rem; }
  .feature { grid-template-columns:1fr; } .feature-copy { padding:60px 24px; } .feature-image { min-height:430px; } .values { gap:15px; padding-block:28px; font-size:.51rem; letter-spacing:.09em; }
  .newsletter { grid-template-columns:1fr; gap:35px; } .footer-grid { grid-template-columns:1fr 1fr; gap:30px; } .footer-brand { grid-column:1/-1; } .footer-bottom { flex-direction:column; gap:15px; } .footer-bottom > a { align-self:flex-start; }
  .drawer { padding:24px 20px; } .utility-dialog { padding:25px; } .dialog-heading h2 { font-size:2rem; }
}
@media (max-width:400px) { .hero-actions { flex-direction:column; align-items:flex-start; } .filters { gap:22px; } .ritual-grid { grid-template-columns:1fr; } .ritual-card .image-container { height:350px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } .reveal { opacity:1; transform:none; } }

/* Local photographs; the existing containers retain all layout dimensions. */
.image-container > .photograph {
  position:absolute; inset:0; width:100%; height:100%; display:block;
  object-fit:cover; object-position:50% 50%;
}
.hero-beauty > .photograph { object-position:51% 35%; }
.editorial-beauty > .photograph { object-fit:contain; object-position:50% 50%; }
.ritual-skin > .photograph { object-position:50% 40%; }
.ritual-body > .photograph { object-position:63% 48%; }
.product-card .photograph, .feature-image > .photograph { object-fit:contain; object-position:50% 50%; }
.hero-beauty::after, .editorial-beauty::after, .feature-image::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg,rgba(247,244,237,.88),transparent 18%);
}
.product-index { background:rgba(247,244,237,.92); padding:3px 6px; }
.bag-swatch > .photograph { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; }
@media (max-width:1100px) and (min-width:761px) {
  .hero-beauty > .photograph { object-position:50% 35%; }
  .ritual-skin > .photograph { object-position:52% 40%; }
  .ritual-body > .photograph { object-position:64% 48%; }
}
@media (max-width:760px) {
  .hero-beauty > .photograph { object-position:50% 35%; }
  .editorial-beauty > .photograph { object-position:50% 50%; }
  .ritual-skin > .photograph { object-position:54% 40%; }
  .ritual-body > .photograph { object-position:65% 48%; }
}