/* ============================================================
   LUMIÉ — botanical skincare landing. Loads after base.css.
   Look: skinair.png. Motion: the reel (preloader -> zoom reveal).
   No em dashes anywhere.
   ============================================================ */

:root{
  --cream:#F7F1E3; --ivory:#FCF8EE; --sage:#C7C4A2; --sage-2:#DAD6B8;
  --sage-deep:#8B8B68; --forest:#2C3A1C; --forest-2:#3B4A26; --leaf:#6E7A32;
  --leaf-br:#8BA34A; --bark:#46401F; --ink:#262A1D; --muted:#6C6A52;
  --line:rgba(44,58,28,.16); --line-soft:rgba(44,58,28,.10);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(1.25rem, 5vw, 6rem);
  --maxw:1600px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

html,body{background:var(--cream);color:var(--ink);}
body{font-family:var(--sans);font-size:1.0625rem;line-height:1.6;font-weight:450;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
::selection{background:var(--forest);color:var(--cream);}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.01em;color:var(--forest);}
p{margin:0;}
.wordmark{font-family:var(--serif);}

/* ---------- shared bits ---------- */
.eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--leaf);margin:0 0 1.4rem;}
.eyebrow--light{color:rgba(247,241,227,.85);}
.section-title{font-size:clamp(2.2rem,5.2vw,4.4rem);line-height:1.02;}
.link-arrow{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:.95rem;
  color:var(--forest);border-bottom:1px solid var(--line);padding-bottom:.25rem;transition:gap .35s var(--ease),border-color .35s;}
.link-arrow svg{transition:transform .35s var(--ease);}
.link-arrow:hover{gap:.85rem;border-color:var(--forest);}
.link-arrow:hover svg{transform:translateX(4px);}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-weight:600;font-size:.9rem;letter-spacing:.04em;
  padding:1rem 1.9rem;border-radius:999px;cursor:pointer;transition:transform .4s var(--ease),background .4s,color .4s,box-shadow .4s;
  white-space:nowrap;}
.btn--solid{background:var(--forest);color:var(--cream);}
.btn--solid:hover{background:var(--forest-2);transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(44,58,28,.6);}
.btn--ghost{background:transparent;color:var(--forest);box-shadow:inset 0 0 0 1.4px var(--forest);}
.btn--ghost:hover{background:var(--forest);color:var(--cream);transform:translateY(-2px);}
.btn--soft{background:rgba(44,58,28,.06);color:var(--forest);padding:.8rem 1.4rem;font-size:.85rem;width:100%;}
.btn--soft:hover{background:var(--forest);color:var(--cream);}
.btn--block{width:100%;}

/* ============================================================ PRELOADER */
.loader{background:var(--cream);display:grid;place-items:center;
  transition:transform 1.05s cubic-bezier(.76,0,.24,1),opacity .6s ease .35s;
  animation:loaderFailsafe 0s linear 8s forwards;}
.loader.is-gone{transform:translateY(-101%);}
/* no-JS: never let the preloader trap the page */
html:not(.js) .loader{display:none;}
/* ultimate CSS failsafe if the script errors before its own timeout */
@keyframes loaderFailsafe{to{opacity:0;visibility:hidden;pointer-events:none;}}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:1.1rem;color:var(--forest);}
.loader__mark{opacity:0;transform:translateY(8px) scale(.96);animation:markIn .9s var(--ease) forwards;}
.loader__word{font-family:var(--serif);font-size:1.5rem;letter-spacing:.42em;padding-left:.42em;
  color:var(--forest);opacity:0;animation:markIn .9s var(--ease) .12s forwards;}
.loader__bar{position:relative;width:132px;height:1.4px;background:var(--line);overflow:hidden;border-radius:2px;margin-top:.3rem;}
.loader__bar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--forest);
  animation:barGrow 2.6s cubic-bezier(.5,0,.2,1) forwards;}
@keyframes markIn{to{opacity:1;transform:none;}}
@keyframes barGrow{0%{transform:scaleX(0);}70%{transform:scaleX(.75);}100%{transform:scaleX(1);}}

/* ============================================================ NAV */
.nav{position:fixed;inset:0 0 auto;z-index:200;transition:background .5s var(--ease),box-shadow .5s,padding .5s;
  padding:clamp(1rem,2.2vw,1.6rem) 0;}
.nav__wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;}
.nav__brand{font-size:1.5rem;letter-spacing:.34em;padding-left:.34em;color:var(--forest);font-weight:400;}
.nav__links{display:flex;gap:clamp(1.4rem,2.6vw,2.8rem);}
.nav__links a{font-size:.82rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--forest);
  position:relative;padding:.3rem 0;opacity:.9;transition:opacity .3s;}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);}
.nav__links a:hover{opacity:1;}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left;}
.nav__tools{display:flex;align-items:center;gap:.4rem;}
.nav__icon{display:grid;place-items:center;width:42px;height:42px;border-radius:999px;color:var(--forest);
  transition:background .3s;}
.nav__icon:hover{background:rgba(44,58,28,.08);}
.nav__cart{position:relative;}
.nav__count{position:absolute;top:5px;right:5px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:var(--forest);color:var(--cream);font-family:var(--sans);font-size:.62rem;font-weight:700;
  display:grid;place-items:center;line-height:1;}
.nav__count[hidden]{display:none;}
.nav__burger{display:none;flex-direction:column;gap:5px;width:42px;height:42px;align-items:center;justify-content:center;}
.nav__burger span{width:22px;height:1.6px;background:var(--forest);transition:transform .4s var(--ease),opacity .3s;}
/* condensed on scroll */
.nav.scrolled{background:rgba(247,241,227,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line-soft);padding:.7rem 0;}

/* ============================================================ MOBILE MENU */
.menu{position:fixed;inset:0;z-index:300;background:var(--cream);
  display:flex;flex-direction:column;justify-content:center;padding:var(--pad);
  transform:translateY(-100%);transition:transform .6s cubic-bezier(.76,0,.24,1);}
.menu.open{transform:none;}
.menu[hidden]{display:flex;}
.menu__close{position:absolute;top:1.4rem;right:var(--pad);width:44px;height:44px;display:grid;place-items:center;color:var(--forest);}
.menu__links{display:flex;flex-direction:column;gap:.4rem;}
.menu__links a{font-family:var(--serif);font-size:clamp(2.4rem,11vw,3.6rem);color:var(--forest);
  opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s;}
.menu.open .menu__links a{opacity:1;transform:none;}
.menu.open .menu__links a:nth-child(1){transition-delay:.1s;}
.menu.open .menu__links a:nth-child(2){transition-delay:.16s;}
.menu.open .menu__links a:nth-child(3){transition-delay:.22s;}
.menu.open .menu__links a:nth-child(4){transition-delay:.28s;}
.menu.open .menu__links a:nth-child(5){transition-delay:.34s;}
.menu__foot{margin-top:2.5rem;color:var(--muted);font-size:.9rem;letter-spacing:.02em;}

/* ============================================================ HERO */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;isolation:isolate;background:var(--sage-2);}
.hero__media{position:absolute;left:0;right:0;top:-10%;bottom:-10%;z-index:0;will-change:transform;}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover;object-position:62% 44%;}
/* the loop sits on top of the still and fades in once it is actually painting, so a slow
   connection, a blocked autoplay or reduced motion just leaves the still in place */
.hero__video{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none;}
.hero__video.is-playing{opacity:1;}
@media (prefers-reduced-motion:reduce){.hero__video{display:none;}}
.hero__scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(247,241,227,.42) 0%,rgba(247,241,227,0) 22%),
    linear-gradient(90deg,rgba(247,241,227,.5) 0%,rgba(247,241,227,.08) 34%,rgba(247,241,227,0) 55%),
    linear-gradient(0deg,rgba(28,34,16,.4) 0%,rgba(28,34,16,.06) 26%,rgba(28,34,16,0) 44%);}

.hero__wordmark{position:absolute;left:0;right:0;bottom:clamp(-.6rem,-.4vw,0rem);z-index:1;text-align:center;
  font-size:clamp(4.5rem,19vw,19rem);line-height:.8;font-weight:400;letter-spacing:.005em;
  color:rgba(250,246,236,.9);white-space:nowrap;pointer-events:none;will-change:transform;
  text-shadow:0 2px 44px rgba(28,34,16,.34);}

.hero__content{position:absolute;left:0;right:0;z-index:3;
  max-width:var(--maxw);width:100%;margin:0 auto;
  padding:0 var(--pad);top:clamp(7rem,20vh,13rem);}
.hero__eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--forest);
  margin:0 0 1.4rem;opacity:.85;}
.hero__title{font-size:clamp(3rem,8.4vw,7rem);line-height:.98;color:var(--forest);letter-spacing:-.02em;}
.hero__title span{display:block;}
.hero__sub{max-width:26rem;margin:1.8rem 0 2.2rem;color:var(--forest-2);font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.5;font-weight:500;}
.hero__cta{display:flex;gap:.9rem;flex-wrap:wrap;}

.hero__features{position:absolute;left:0;right:0;margin:0 auto;bottom:clamp(1.4rem,3.5vh,2.6rem);z-index:3;
  max-width:var(--maxw);width:100%;padding:0 var(--pad);
  display:flex;gap:clamp(1.4rem,3.5vw,3.4rem);list-style:none;}
.hero__features li{display:flex;align-items:center;gap:.7rem;color:var(--cream);
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;line-height:1.25;
  text-shadow:0 1px 14px rgba(28,34,16,.5);}
.hero__features svg{flex:none;opacity:.95;}
.hero__scroll{position:absolute;right:var(--pad);bottom:clamp(1.4rem,3.5vh,2.6rem);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;color:var(--cream);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 12px rgba(28,34,16,.5);}
.hero__scroll svg{animation:bob 1.8s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}

/* ============================================================ STORY */
.story{max-width:var(--maxw);margin:0 auto;padding:clamp(6rem,13vw,12rem) var(--pad);}
.story__lead{font-size:clamp(1.9rem,4.3vw,3.7rem);line-height:1.16;font-weight:400;color:var(--forest);
  max-width:20ch;letter-spacing:-.01em;}
.story__words .w{display:inline-block;opacity:.18;transition:opacity .5s var(--ease);}
.story__words .w.lit{opacity:1;}
html:not(.js) .story__words .w{opacity:1;}
.story__meta{display:flex;flex-wrap:wrap;gap:2rem 4rem;align-items:end;justify-content:space-between;
  margin-top:clamp(3rem,6vw,5rem);padding-top:2.4rem;border-top:1px solid var(--line);}
.story__meta p{max-width:34rem;color:var(--muted);}

/* ============================================================ COLLECTION */
.collection{max-width:var(--maxw);margin:0 auto;padding:clamp(5rem,9vw,9rem) var(--pad) clamp(9rem,16vw,15rem);}
.collection__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1.5rem;
  margin-bottom:clamp(3rem,6vw,5.5rem);}
/* the card grid was replaced by the vertical columns slider, styled at the end of this file */

/* ============================================================ INGREDIENTS */
.ingredients{max-width:var(--maxw);margin:0 auto;padding:clamp(4rem,8vw,8rem) var(--pad);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,7rem);align-items:center;}
.ingredients__media{position:relative;}
.ing-shot{border-radius:20px;overflow:hidden;aspect-ratio:1/1;background:linear-gradient(160deg,var(--sage-2),var(--sage));
  box-shadow:0 30px 60px -34px rgba(44,58,28,.5);}
.ing-shot--low{position:absolute;width:52%;right:-6%;bottom:-14%;aspect-ratio:1/1;border:6px solid var(--cream);}
.ingredients__intro{color:var(--muted);max-width:34rem;margin:1.4rem 0 2.4rem;}
.ing-list{list-style:none;margin:0 0 2.6rem;padding:0;}
.ing-list li{display:grid;grid-template-columns:minmax(9rem,32%) 1fr;gap:1.2rem;align-items:baseline;
  padding:1.05rem 0;border-top:1px solid var(--line);}
.ing-list li:last-child{border-bottom:1px solid var(--line);}
.ing-list__n{font-family:var(--serif);font-size:1.28rem;color:var(--forest);}
.ing-list__d{color:var(--muted);font-size:.94rem;}
.ing-stats{display:flex;flex-wrap:wrap;gap:2rem 3rem;}
.ing-stats b{font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.2rem);color:var(--leaf);font-weight:400;display:block;line-height:1;}
.ing-stats span{font-size:.82rem;color:var(--muted);display:block;margin-top:.4rem;max-width:9rem;}

/* ============================================================ RITUAL */
.ritual{position:relative;overflow:hidden;isolation:isolate;color:var(--cream);
  margin:clamp(2rem,5vw,5rem) 0;}
.ritual__media{position:absolute;inset:-12% 0;z-index:-0;will-change:transform;}
.ritual__media img{width:100%;height:100%;object-fit:cover;object-position:center;}
.ritual__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,34,16,.5),rgba(28,34,16,.62));}
.ritual__inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  padding:clamp(5rem,11vw,9rem) var(--pad);}
.ritual__title{color:var(--cream);font-size:clamp(2.2rem,5vw,4rem);max-width:16ch;}
.steps{list-style:none;margin:clamp(3rem,6vw,5rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem);}
.steps li{border-top:1px solid rgba(247,241,227,.28);padding-top:1.4rem;}
.steps__n{font-family:var(--serif);font-size:1rem;color:rgba(247,241,227,.6);letter-spacing:.1em;}
.steps h3{color:var(--cream);font-size:clamp(1.5rem,2.4vw,2rem);margin:.7rem 0 .6rem;}
.steps p{color:rgba(247,241,227,.82);font-size:.96rem;max-width:24rem;}

/* ============================================================ PROMISE */
.promise{background:var(--sage-2);}
.promise{max-width:none;padding:clamp(5rem,9vw,8rem) var(--pad);}
.promise>.eyebrow{max-width:var(--maxw);margin-left:auto;margin-right:auto;}
.promise__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,3rem);}
.promise__item{color:var(--forest);}
.promise__item svg{color:var(--leaf);margin-bottom:1.1rem;}
.promise__item h3{font-size:1.35rem;margin-bottom:.6rem;}
.promise__item p{color:var(--forest-2);opacity:.85;font-size:.94rem;}

/* ============================================================ JOURNAL */
.journal{max-width:var(--maxw);margin:0 auto;padding:clamp(6rem,11vw,10rem) var(--pad);}
.journal__head{margin-bottom:3rem;}
.journal__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.4vw,2.4rem);}
.post{display:flex;flex-direction:column;text-align:left;background:none;gap:1rem;}
.post__media{display:block;aspect-ratio:4/5;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,var(--sage-2),var(--sage));}
.post__media img{transition:transform .8s var(--ease);}
.post:hover .post__media img{transform:scale(1.05);}
.post__meta{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--leaf);}
.post__title{font-family:var(--serif);font-size:clamp(1.3rem,1.8vw,1.7rem);color:var(--forest);line-height:1.12;
  transition:color .3s;}
.post:hover .post__title{color:var(--leaf);}

/* ============================================================ CTA */
.cta{padding:clamp(5rem,10vw,9rem) var(--pad);background:var(--forest);color:var(--cream);text-align:center;}
.cta__inner{max-width:44rem;margin:0 auto;}
.cta__title{color:var(--cream);font-size:clamp(2.4rem,6vw,4.6rem);}
.cta__sub{color:rgba(247,241,227,.78);margin:1.3rem auto 2.4rem;max-width:34rem;}
.cta__form{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;position:relative;}
.cta__form input{flex:1;min-width:0;max-width:22rem;background:rgba(247,241,227,.1);border:1px solid rgba(247,241,227,.28);
  border-radius:999px;padding:1rem 1.4rem;color:var(--cream);font-family:var(--sans);font-size:.95rem;}
.cta__form input::placeholder{color:rgba(247,241,227,.55);}
.cta__form input:focus{outline:none;border-color:var(--cream);background:rgba(247,241,227,.16);}
.cta__form .btn--solid{background:var(--cream);color:var(--forest);}
.cta__form .btn--solid:hover{background:#fff;}
.cta__msg{position:absolute;top:calc(100% + .9rem);left:0;width:100%;font-size:.88rem;color:var(--leaf-br);min-height:1.2em;}
.cta__msg.err{color:#e6b3a0;}

/* ============================================================ FOOTER */
.footer{background:var(--cream);padding:clamp(4rem,7vw,6rem) var(--pad) 2.2rem;border-top:1px solid var(--line);}
.footer__top{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.4fr 2fr;gap:3rem;}
.footer__word{font-size:2rem;letter-spacing:.3em;padding-left:.3em;color:var(--forest);display:inline-block;}
.footer__brand p{color:var(--muted);max-width:22rem;margin-top:1rem;}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.footer__cols h4{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--forest);margin-bottom:1.1rem;}
.footer__cols a{display:block;color:var(--muted);font-size:.92rem;padding:.32rem 0;transition:color .3s;}
.footer__cols a:hover{color:var(--forest);}
.footer__base{max-width:var(--maxw);margin:3rem auto 0;padding-top:1.6rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--muted);font-size:.8rem;letter-spacing:.03em;}

/* ============================================================ DRAWER / READER / SEARCH */
.drawer,.reader,.search{position:fixed;inset:0;z-index:400;}
.drawer[hidden],.reader[hidden],.search[hidden]{display:none;}
.drawer__scrim,.reader__scrim,.search__scrim{position:absolute;inset:0;background:rgba(28,34,16,.42);
  opacity:0;transition:opacity .45s;backdrop-filter:blur(2px);}
.drawer.open .drawer__scrim,.reader.open .reader__scrim,.search.open .search__scrim{opacity:1;}
.drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(420px,90vw);background:var(--cream);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .5s var(--ease);
  box-shadow:-20px 0 60px -30px rgba(28,34,16,.6);}
.drawer.open .drawer__panel{transform:none;}
.drawer__head{display:flex;justify-content:space-between;align-items:center;padding:1.6rem;border-bottom:1px solid var(--line);}
.drawer__head h3{font-size:1.4rem;}
.drawer__close,.reader__close{width:40px;height:40px;display:grid;place-items:center;color:var(--forest);border-radius:999px;}
.drawer__close:hover,.reader__close:hover{background:rgba(44,58,28,.08);}
.drawer__items{flex:1;overflow-y:auto;padding:1.2rem 1.6rem;}
.drawer__empty{color:var(--muted);font-size:.94rem;padding:2rem 0;}
.cart-item{display:grid;grid-template-columns:1fr auto;gap:.4rem;padding:1rem 0;border-bottom:1px solid var(--line-soft);}
.cart-item h4{font-family:var(--serif);font-size:1.05rem;color:var(--forest);}
.cart-item small{color:var(--muted);}
.cart-item b{font-family:var(--sans);font-weight:700;font-size:.92rem;color:var(--forest);}
.cart-item button{color:var(--muted);font-size:.78rem;text-decoration:underline;justify-self:start;margin-top:.2rem;}
.cart-item button:hover{color:var(--forest);}
.drawer__foot{padding:1.4rem 1.6rem calc(1.6rem + env(safe-area-inset-bottom));border-top:1px solid var(--line);}
.drawer__total{display:flex;justify-content:space-between;margin-bottom:1rem;font-size:1rem;}
.drawer__total b{font-family:var(--serif);font-size:1.4rem;color:var(--forest);}
.drawer__note{margin-top:.9rem;font-size:.84rem;color:var(--leaf);min-height:1em;text-align:center;}

.reader__panel{position:absolute;top:0;right:0;height:100%;width:min(600px,96vw);background:var(--ivory);
  overflow-y:auto;padding:clamp(2rem,5vw,4rem);transform:translateX(100%);transition:transform .55s var(--ease);}
.reader.open .reader__panel{transform:none;}
.reader__close{position:absolute;top:1.3rem;right:1.3rem;}
.reader__meta{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--leaf);margin-bottom:1rem;}
.reader__title{font-size:clamp(2rem,4vw,3rem);margin-bottom:1.6rem;line-height:1.05;}
.reader__body p{color:var(--forest-2);margin-bottom:1.1rem;line-height:1.7;}

.search{align-items:flex-start;}
.search__box{position:relative;z-index:1;max-width:var(--maxw);margin:clamp(4rem,12vh,9rem) auto 0;
  width:calc(100% - var(--pad)*2);background:var(--cream);border-radius:18px;padding:1.2rem 1.4rem;
  display:flex;align-items:center;gap:1rem;color:var(--forest);transform:translateY(-14px);opacity:0;transition:.4s var(--ease);
  box-shadow:0 30px 70px -30px rgba(28,34,16,.5);}
.search.open .search__box{transform:none;opacity:1;}
.search__box input{flex:1;min-width:0;background:none;border:none;font-family:var(--serif);font-size:clamp(1.2rem,3vw,1.8rem);color:var(--forest);}
.search__box input:focus{outline:none;}
.search__box input::placeholder{color:var(--sage-deep);}
.search__close{font-size:.72rem;letter-spacing:.1em;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:.35rem .55rem;}
.search__results{position:relative;z-index:1;max-width:var(--maxw);margin:.7rem auto 0;width:calc(100% - var(--pad)*2);
  display:flex;flex-direction:column;gap:.2rem;}
.search__results a{background:rgba(247,241,227,.9);padding:.9rem 1.2rem;border-radius:12px;color:var(--forest);
  display:flex;justify-content:space-between;gap:1rem;opacity:0;transform:translateY(6px);}
.search.open .search__results a{opacity:1;transform:none;transition:.35s var(--ease);}
.search__results a:hover{background:var(--cream);}
.search__results small{color:var(--muted);}

/* ============================================================ REVEAL */
.reveal{transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
html.js .reveal.in{transform:none;}
html.js .reveal{transition-delay:var(--d,0s);}

/* body scroll lock when an overlay is open */
body.lock{overflow:hidden;}

/* ============================================================ RESPONSIVE */
@media (max-width:1100px){
  .promise__grid{grid-template-columns:repeat(2,1fr);row-gap:2.6rem;}
  .ingredients{grid-template-columns:1fr;gap:4rem;}
  .ing-shot--low{width:44%;right:0;bottom:-10%;}
  .footer__top{grid-template-columns:1fr;gap:2.4rem;}
}
@media (max-width:820px){
  .nav__links{display:none;}
  .nav__burger{display:flex;}
  .hero__features{gap:1.1rem;flex-wrap:wrap;}
  .hero__features li{font-size:.62rem;gap:.5rem;}
  .journal__grid{grid-template-columns:1fr;gap:2.4rem;}
  .steps{grid-template-columns:1fr;}
  .story__meta{flex-direction:column;align-items:flex-start;gap:1.6rem;}
}
@media (max-width:600px){
  :root{--pad:1.25rem;}
  /* mobile hero: jar sits lower, a stronger cream veil keeps copy legible, chips move to the promise band */
  .hero__media img,.hero__media video{object-position:58% 50%;}
  .hero__scrim{background:
    linear-gradient(180deg,rgba(247,241,227,.9) 0%,rgba(247,241,227,.64) 40%,rgba(247,241,227,0) 64%),
    linear-gradient(0deg,rgba(28,34,16,.52) 0%,rgba(28,34,16,.08) 24%,rgba(28,34,16,0) 40%);}
  .hero__content{top:clamp(5.5rem,14vh,8rem);}
  .hero__title{font-size:clamp(3.1rem,15vw,4.4rem);}
  .hero__sub{font-size:1.05rem;max-width:22rem;}
  .hero__wordmark{font-size:24vw;bottom:1.6rem;color:rgba(250,246,236,.94);}
  .hero__features{display:none;}
  .hero__scroll{display:none;}
  .promise__grid{grid-template-columns:1fr;}
  .footer__cols{grid-template-columns:1fr 1fr;gap:1.6rem;}
  .ing-list li{grid-template-columns:1fr;gap:.3rem;}
}


/* ============================================================
   COLLECTION: scroll-scrubbed column roll
   Ported from the "Skincare Scroll Transition v6" collection-swap
   scene. Its structure, kept: a tall section with a sticky stage,
   and each column a roll of stacked cells that translates upward.
   No pin plugin is involved, position:sticky does the pinning.

   Its cells hold generated SVG bottles. These hold the real
   photographs, so one picture has to span the whole stage: every
   column paints the SAME image at full stage width, shifted left
   by its own offset, and the slices reassemble into one picture.
   Column and image geometry both derive from --sw / --sh, set by
   JS, never from the column's own width, so the 1px anti-hairline
   bleed on each column cannot drift the image and open a seam.
   ============================================================ */
.shelf{position:relative;
  height:calc(100svh + (var(--scenes,4) - 1) * var(--vh-per-scene,140) * 1svh);}
.shelf__stage{position:sticky;top:0;height:100svh;overflow:hidden;
  background:var(--sage-2);}

/* the roll is --scenes cells tall and travels up by all but one of them */
.shelf__cols{position:absolute;inset:0;}
.shelf__col{position:absolute;top:0;bottom:0;overflow:hidden;
  left:calc(var(--i) * var(--sw) / var(--n));
  width:calc(var(--sw) / var(--n) + 1px);}   /* +1px bleed kills sub-pixel hairlines */
.shelf__roll{position:absolute;top:0;left:0;right:0;
  height:calc(var(--scenes,4) * 100%);will-change:transform;}
.shelf__cell{position:relative;height:calc(100% / var(--scenes,4));overflow:hidden;
  background:var(--bg,var(--sage-2));}

/* --iw is the painted width of the scene and --ix where its left edge falls, both in
   stage coordinates; the column's own offset is subtracted on top, which is what
   slices it. The scene is never cropped horizontally, it is anchored to the bottom of
   its cell and the cell's backdrop colour fills whatever is left above. Cover-cropping
   a 16:9 scene into any taller box eats the outer plinths, which the reference never
   does to its shelf.

   The max() in --iw is what makes one rule cover every shape. On a 16:9 window the
   scene paints exactly stage-wide and fills the frame. On a slightly taller window it
   still paints stage-wide and leaves a shallow band of backdrop above. On a portrait
   phone, stage-wide would leave a thin strip in a sea of colour, so it scales up off
   the height instead (to about 60% of it) while never going narrower than the stage,
   which keeps the ground band reaching both edges. The colour above is the cell's own
   backdrop, sampled from the top of that image where the generation brief kept the
   frame empty, so the scene extends upward with no visible seam. */
.shelf__cell img{
  --iw:max(var(--sw), calc(var(--sh) * 1.05));
  --ix:calc((var(--sw) - max(var(--sw), calc(var(--sh) * 1.05))) / 2);
  position:absolute;bottom:0;max-width:none;
  width:var(--iw);height:auto;
  left:calc(var(--ix) - var(--i) * var(--sw) / var(--n));}

.shelf__fallback{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;}
.shelf.is-ready .shelf__fallback{display:none;}

/* the section head no longer sits above a framed panel, so it stops short of the roll */
.collection{padding-bottom:clamp(3rem,6vw,5rem);}

/* Reduced motion holds the first scene. The reference leaves its section full height
   in that case, which strands three viewports of dead scroll under a frozen picture,
   so collapse it to a single screen instead. */
@media (prefers-reduced-motion:reduce){
  .shelf{height:100svh;}
}

/* ============================================================
   SHOP + CHECKOUT
   The collection roll carries no UI by design, so the buying
   lives in its own section under it and in a checkout overlay.
   ============================================================ */
.shop{max-width:var(--maxw);margin:0 auto;
  padding:clamp(5rem,9vw,8rem) var(--pad) clamp(5rem,9vw,8rem);}
.shop__head{max-width:44rem;margin-bottom:clamp(2.6rem,5vw,4rem);}
.shop__intro{color:var(--muted);font-size:1.02rem;margin-top:1rem;max-width:34rem;}
.shop__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.2vw,2.2rem);align-items:start;}

.prod{display:flex;flex-direction:column;background:var(--ivory);border-radius:18px;overflow:hidden;
  box-shadow:0 1px 0 var(--line-soft);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);}
.prod:hover{transform:translateY(-6px);box-shadow:0 26px 50px -28px rgba(44,58,28,.34);}
.prod__media{position:relative;aspect-ratio:3/4;background:linear-gradient(160deg,var(--sage-2),var(--sage));}
.prod__media img{transition:transform .8s var(--ease);}
.prod:hover .prod__media img{transform:scale(1.05);}
.prod__step{position:absolute;top:.85rem;left:.9rem;z-index:2;
  font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.18em;
  color:var(--forest);background:rgba(252,248,238,.9);border-radius:999px;padding:.32rem .6rem;}
.prod__body{display:flex;flex-direction:column;gap:.55rem;padding:1.2rem 1.2rem 1.35rem;flex:1;}
.prod__row{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;}
.prod__row h3{font-size:1.18rem;line-height:1.15;color:var(--forest);}
.prod__price{font-family:var(--sans);font-weight:700;font-size:.95rem;color:var(--forest);white-space:nowrap;}
.prod__note{color:var(--muted);font-size:.88rem;line-height:1.5;flex:1;}
.prod__meta{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--leaf);}
.prod .btn{margin-top:.5rem;}

.bundle{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;
  margin-top:clamp(1.5rem,3vw,2.4rem);padding:clamp(1.6rem,3vw,2.4rem) clamp(1.6rem,3.4vw,2.8rem);
  border-radius:18px;background:var(--forest);color:var(--cream);}
.bundle__body{max-width:36rem;}
.bundle__body .eyebrow{color:var(--leaf-br);margin-bottom:.6rem;}
.bundle__body h3{font-size:clamp(1.5rem,2.6vw,2rem);color:var(--cream);margin-bottom:.5rem;}
.bundle__body p{color:rgba(247,241,227,.76);font-size:.95rem;}
.bundle__buy{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.bundle__was{font-family:var(--sans);font-size:.95rem;color:rgba(247,241,227,.5);text-decoration:line-through;}
.bundle__price{font-family:var(--sans);font-weight:700;font-size:1.3rem;color:var(--cream);}
.bundle .btn--solid{background:var(--cream);color:var(--forest);}
.bundle .btn--solid:hover{background:#fff;color:var(--forest);}

/* ---------- cart line items with quantities ---------- */
.cart-item{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  padding:1rem 0;border-bottom:1px solid var(--line-soft);}
.cart-item h4{font-family:var(--serif);font-size:1.05rem;color:var(--forest);margin-bottom:.2rem;}
.cart-item small{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.55rem;}
.qty{display:inline-flex;align-items:center;gap:.1rem;border:1px solid var(--line);border-radius:999px;overflow:hidden;}
.qty button{width:32px;height:32px;display:grid;place-items:center;color:var(--forest);
  font-family:var(--sans);font-size:1rem;line-height:1;transition:background .3s;}
.qty button:hover{background:rgba(44,58,28,.08);}
.qty b{min-width:26px;text-align:center;font-family:var(--sans);font-weight:700;font-size:.85rem;}
.cart-item__right{text-align:right;display:flex;flex-direction:column;gap:.5rem;align-items:flex-end;}
.cart-item__right b{font-family:var(--sans);font-size:.95rem;color:var(--forest);}
.cart-item__rm{font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;transition:color .3s;}
.cart-item__rm:hover{color:var(--forest);}

/* ---------- checkout overlay ---------- */
.checkout{position:fixed;inset:0;z-index:400;}
.checkout[hidden]{display:none;}
.checkout__scrim{position:absolute;inset:0;background:rgba(28,34,16,.5);opacity:0;
  transition:opacity .5s var(--ease);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.checkout.open .checkout__scrim{opacity:1;}
.checkout__panel{position:absolute;top:0;right:0;bottom:0;width:min(30rem,100%);
  background:var(--cream);overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:clamp(1.5rem,4vw,2.6rem);
  transform:translateX(100%);transition:transform .6s cubic-bezier(.76,0,.24,1);}
.checkout.open .checkout__panel{transform:none;}
.checkout__close{position:absolute;top:1rem;right:1rem;width:44px;height:44px;
  display:grid;place-items:center;color:var(--forest);border-radius:999px;transition:background .3s;}
.checkout__close:hover{background:rgba(44,58,28,.08);}

.steps-bar{display:flex;gap:.5rem;list-style:none;margin:0 0 1.8rem;padding:2.2rem 0 0;}
.steps-bar li{flex:1;font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);padding-top:.55rem;border-top:2px solid var(--line-soft);
  transition:color .4s var(--ease),border-color .4s var(--ease);}
.steps-bar li.is-on{color:var(--forest);border-top-color:var(--forest);}

.co-title{font-size:clamp(1.5rem,4vw,1.9rem);margin-bottom:1.3rem;}
.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem;}
.field label{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);}
.field input{font:inherit;font-size:.95rem;color:var(--ink);background:var(--ivory);
  border:1px solid var(--line);border-radius:10px;padding:.8rem .9rem;min-height:44px;
  transition:border-color .3s,box-shadow .3s;}
.field input:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(44,58,28,.12);}
.field input.is-bad{border-color:#a8452f;box-shadow:0 0 0 3px rgba(168,69,47,.12);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;}

.ship{border:0;padding:0;margin:1rem 0 1.2rem;}
.ship legend{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.55rem;padding:0;}
.ship__opt{display:flex;align-items:center;gap:.8rem;padding:.8rem .9rem;margin-bottom:.5rem;
  border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--ivory);
  transition:border-color .3s,background .3s;}
.ship__opt:has(input:checked){border-color:var(--forest);background:rgba(44,58,28,.05);}
.ship__opt span{flex:1;font-family:var(--sans);font-size:.9rem;font-weight:600;color:var(--forest);}
.ship__opt small{display:block;font-weight:500;font-size:.76rem;color:var(--muted);letter-spacing:0;text-transform:none;}
.ship__opt b{font-family:var(--sans);font-size:.9rem;color:var(--forest);}

.co-msg{min-height:1.2rem;font-size:.84rem;color:#a8452f;margin-bottom:.6rem;}
.co-lines{margin-bottom:1.2rem;}
.co-line{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;
  border-bottom:1px solid var(--line-soft);font-size:.92rem;}
.co-line span{color:var(--ink);}
.co-line small{color:var(--muted);}
.co-line b{font-family:var(--sans);white-space:nowrap;}
.co-totals{margin:0 0 1rem;font-family:var(--sans);font-size:.92rem;}
.co-totals div{display:flex;justify-content:space-between;padding:.4rem 0;}
.co-totals dt{color:var(--muted);}
.co-totals dd{margin:0;color:var(--forest);}
.co-totals__grand{border-top:1px solid var(--line);margin-top:.4rem;padding-top:.7rem !important;font-weight:700;font-size:1.05rem;}
.co-to{font-size:.86rem;color:var(--muted);line-height:1.6;margin-bottom:.8rem;}
.co-demo{font-size:.78rem;color:var(--muted);line-height:1.6;background:rgba(44,58,28,.05);
  border-radius:10px;padding:.7rem .85rem;margin-bottom:1rem;}
.co-review .btn--ghost{margin-top:.6rem;}

.co-done{text-align:center;padding-top:2rem;}
.co-seal{display:inline-grid;place-items:center;width:74px;height:74px;border-radius:999px;
  background:rgba(44,58,28,.07);color:var(--forest);margin-bottom:1.2rem;}
.co-done__line{color:var(--muted);font-size:.95rem;line-height:1.7;margin-bottom:.6rem;}
.co-done__line b{color:var(--forest);}
.co-done__note{font-size:.8rem;color:var(--muted);margin-bottom:1.6rem;}

@media (max-width:1000px){
  .shop__grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .shop__grid{grid-template-columns:1fr;max-width:24rem;margin:0 auto;}
  .bundle{flex-direction:column;align-items:flex-start;}
  .bundle__buy{width:100%;justify-content:space-between;}
  .checkout__panel{width:100%;}
  .field-row{grid-template-columns:1fr;}
}