/* ============================================================
   Psyllium Husk Caps — single page, ported 1:1 from ayocin.com's
   system: 10px root (fluid ≥1440), cream #FCF6EC / gray-900 #2E2521,
   Systemia → Hanken Grotesk, Azeret Mono for labels.
   ============================================================ */
:root{
  --cream:#FCF6EC; --gray-900:#2E2521; --bronze:#B2A28B; --sand:#CEC1B2; --cream-2:#EFE9DF;
  --ease-out:cubic-bezier(.77,0,.18,1);
  --font:"Hanken Grotesk","Systemia",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Azeret Mono",ui-monospace,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:10px;line-height:1.5;-webkit-text-size-adjust:100%;height:100%;width:100%;overflow:hidden;position:fixed}
@media (min-width:1440px){html{font-size:.6944444vw}}
body{margin:0;height:100%;width:100%;overflow:hidden;position:fixed;font-family:var(--font);font-size:1.2rem;line-height:1.3;font-weight:400;background:var(--cream);color:var(--gray-900);-webkit-font-smoothing:antialiased}
@media (min-width:768px){body{font-size:1.4rem;line-height:1.4}}
img,video,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
p{margin:0}
::selection{background:var(--gray-900);color:var(--cream)}

/* scroll wrapper (Lenis on a wrapper, like ayocin) */
.wrapper{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.wrapper::-webkit-scrollbar{display:none}
.main{position:relative;z-index:2;background:var(--cream);color:var(--gray-900);display:flex;flex-direction:column}
.container{width:100%;margin:0 auto;padding-left:1.2rem;padding-right:1.2rem}
@media (min-width:1280px){.container{padding-left:1.8rem;padding-right:1.8rem}}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.2rem}
@media (min-width:1280px){.grid12{column-gap:1.8rem}}
.text-cream{color:var(--cream)} .bg-dark{background:var(--gray-900)} .bg-cream{background:var(--cream)}
.uppercase{text-transform:uppercase} .medium{font-weight:500}
.xxs{font-size:1rem} .xs{font-size:1.2rem} .sm{font-size:1.4rem}
.mono{font-family:var(--mono);font-weight:500;font-size:1rem;letter-spacing:.04em;text-transform:uppercase}
.rounded{border-radius:1rem}

/* type scale (ayocin: h2 5.6/9/17, h3 3/3.5/6, h4 2/3.6) */
h1,h2,h3,h4,.h1,.h2,.h3,.h4{font-weight:500;line-height:1;margin:0 0 2rem}
.h2,h2{font-size:5.6rem;letter-spacing:-.02em}
.h3,h3{font-size:3rem}
.h4,h4{font-size:2rem}
@media (min-width:768px){.h2,h2{font-size:9rem}.h3,h3{font-size:3.5rem}.h4,h4{font-size:3.6rem}}
@media (min-width:1280px){.h2,h2{font-size:17rem;letter-spacing:-.08em}.h3,h3{font-size:6rem}}
.h3.tight{letter-spacing:-.02em}
.line-w{position:relative;display:block;overflow:hidden;margin:-.12em 0 -.15em;padding:.12em 0 .15em}
.line-w .line{display:block;will-change:transform}
[data-split]{text-wrap:balance}

/* header */
.header{position:fixed;top:0;left:0;width:100%;z-index:20;color:var(--cream)}
.header-container{transition:transform .7s var(--ease-out),color .35s var(--ease-out);padding:1.5rem 1.2rem}
@media (min-width:1280px){.header-container{padding:1.8rem;display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.8rem;align-items:center}}
.header-container::before{content:"";position:absolute;inset:0;z-index:-1;background:hsla(35,20%,62%,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .5s var(--ease-out)}
.header[data-top="false"] .header-container::before{opacity:1}
.header[data-header-theme="dark"] .header-container{color:var(--gray-900)}
html.is-loading .header-container{transform:translateY(-120%)}
.header{display:flex}.header-container{position:relative;width:100%;display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:600;letter-spacing:.18em;font-size:1.3rem;text-transform:uppercase;grid-column:span 2}
.nav{display:none}
@media (min-width:1280px){.nav{display:flex;align-items:center;gap:2.5rem;font-size:1.4rem;font-weight:500;line-height:1.2;grid-column:3/span 8;justify-content:center}}
.nav a{position:relative}.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-.3em;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 100%;transition:transform .5s cubic-bezier(.215,.61,.355,1)}
.nav a:hover::after{transform:scaleX(1);transform-origin:0 0}
.header .btn{grid-column:11/span 2;justify-self:end}

/* buttons (ayocin .btn: h4rem, radius 2rem, pad 1rem 6rem 1rem 2rem, icon circle right) */
.btn{position:relative;display:inline-flex;align-items:center;height:4rem;padding:1rem 6rem 1rem 2rem;border-radius:2rem;font-size:1.2rem;font-weight:500;line-height:1;text-align:left;user-select:none;white-space:nowrap;transition:color .8s var(--ease-out),background-color .8s var(--ease-out);overflow:hidden}
@media (min-width:768px){.btn{font-size:1.4rem}}
.btn__icon{position:absolute;right:.5rem;top:.5rem;width:3rem;height:3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.btn__icon::before{content:"";position:absolute;inset:0;border-radius:50%;transform:scale(.001);transition:transform .8s var(--ease-out)}
.btn__icon svg{position:relative;width:1.2rem;height:1.2rem;transition:transform .8s var(--ease-out)}
.btn::after{content:"";position:absolute;inset:0;border-radius:2rem;transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease-out);z-index:-1}
.btn>span:not(.btn__icon){position:relative;z-index:1}
.btn--primary{background:var(--gray-900);color:var(--cream)}
.btn--primary .btn__icon{color:var(--gray-900);background:var(--cream)}
.btn--primary .btn__icon::before{background:var(--gray-900)}
.btn--primary::after{background:var(--cream)}
.btn--primary:hover{color:var(--gray-900);transition-delay:.2s}
.btn--primary:hover::after{transform:scaleX(1)}
.btn--primary:hover .btn__icon{color:var(--cream)}
.btn--primary:hover .btn__icon::before{transform:scale(1)}
.btn--secondary{background:var(--cream);color:var(--gray-900)}
.btn--secondary .btn__icon{color:var(--cream);background:var(--gray-900)}
.btn--secondary .btn__icon::before{background:var(--cream)}
.btn--secondary::after{background:var(--gray-900)}
.btn--secondary:hover{color:var(--cream);transition-delay:.2s}
.btn--secondary:hover::after{transform:scaleX(1)}
.btn--secondary:hover .btn__icon{color:var(--gray-900)}
.btn--secondary:hover .btn__icon::before{transform:scale(1)}
.btn:hover .btn__icon svg{transform:translateX(.2rem)}
.btn.w-full{width:100%}
.btn-rounded{width:5rem;height:5rem;border-radius:50%;background:var(--cream-2);display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;transition:color .6s var(--ease-out)}
@media (min-width:768px){.btn-rounded{width:7rem;height:7rem}}
.btn-rounded::before{content:"";position:absolute;inset:.2rem;border-radius:50%;background:var(--gray-900);transform:scale(0);transition:transform .6s var(--ease-out)}
.btn-rounded:hover{color:var(--cream-2)}.btn-rounded:hover::before{transform:scale(1)}
.btn-rounded svg{position:relative;width:50%;height:50%}
.link{position:relative;display:inline-flex;align-items:center;gap:.6rem;cursor:pointer}
.link::after{content:"";position:absolute;left:0;right:0;bottom:-.1em;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 100%;transition:transform .5s cubic-bezier(.215,.61,.355,1)}
.link--underline::after,.link:hover::after{transform:scaleX(1);transform-origin:0 0}
.link--underline:hover::after{animation:linkline .75s forwards}
@keyframes linkline{0%{transform:scaleX(1);transform-origin:100% 100%}50%{transform:scaleX(0);transform-origin:100% 100%}51%{transform-origin:0 0}100%{transform:scaleX(1);transform-origin:0 0}}
.link svg{width:1.2rem;height:1.2rem}

/* icons */
.icon{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.icon--s{width:2rem;height:2rem}
.icon--l{width:5rem;height:5rem;padding:1.4rem;border-radius:50rem;background:var(--bronze);background:color-mix(in srgb,var(--bronze) 20%,transparent)}
@media (min-width:768px){.icon--l{width:7rem;height:7rem;padding:2rem}}
.icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:currentColor;margin-right:.5rem;vertical-align:middle}

/* description card (bronze/10 + blur) */
.card{background:color-mix(in srgb,var(--bronze) 10%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:1rem;padding:1.6rem;display:grid;gap:1rem}
.card p{font-size:1.2rem;line-height:1.4;opacity:.9}

/* ---------- preloader curtain ---------- */
.curtain{position:fixed;inset:0;z-index:60;background:var(--cream);color:var(--gray-900);display:flex;align-items:flex-end;justify-content:space-between;padding:1.8rem;font-family:var(--mono);font-size:1rem;letter-spacing:.1em;text-transform:uppercase;transition:opacity .6s var(--ease-out),visibility 0s .6s}
.curtain .bar{position:absolute;left:0;top:0;height:1px;width:100%;background:var(--gray-900);transform:scaleX(0);transform-origin:left}
.curtain .pct{font-family:var(--font);font-size:12vw;line-height:.9;letter-spacing:-.04em;font-weight:500;font-variant-numeric:tabular-nums}
html.assets-ready .curtain{opacity:0;visibility:hidden}
/* lazy images fade in only once decoded (ayocin: .lazyload opacity .35s) */
img[data-lazy]{opacity:0;transition:opacity .5s var(--ease-out)}
img[data-lazy].loaded{opacity:1}

/* ---------- intro ---------- */
.intro{position:relative;height:100vh;height:100svh;min-height:60rem;overflow:hidden;color:var(--cream);z-index:2;--bg:#CEC1B2;background:var(--bg)}
.intro .shade{position:absolute;inset:0;z-index:10;background:#000;opacity:0;pointer-events:none}
.intro .bgwrap{height:100%}
.intro .bg-gradient{position:absolute;inset:0;background:linear-gradient(266.47deg,#c4b3a3 41.41%,#9f8e7a 97.58%),linear-gradient(180deg,#c8b8a3,#baae9e)}
.intro .bg-gradient picture{width:100%;height:100%;opacity:0}
.intro .bg-gradient img{width:100%;height:100%;object-fit:cover;mix-blend-mode:soft-light;transform:scale(1.1)}
.intro .topbar{position:absolute;left:0;top:6rem;width:100%}
@media (min-width:1280px){.intro .topbar{top:7.5rem}}
.intro .topline{position:relative;padding:1.2rem 0}
.intro .topline .rule{position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;opacity:.2;transform:scaleX(0);transform-origin:left}
.intro .wordmark{display:block;font-size:12vw;line-height:.9;letter-spacing:-.04em;font-weight:500;white-space:nowrap;text-transform:uppercase}
@media (min-width:768px){.intro .wordmark{font-size:11.2vw}}
.intro .wordmark .ch{display:inline-block;will-change:transform}
.intro .meta{position:relative;display:flex;align-items:center;justify-content:space-between;padding:1.2rem 0;line-height:1;font-size:1.2rem}
@media (min-width:1280px){.intro .meta{padding:2rem 0}}
.intro .features{position:absolute;left:0;top:100%;width:100%;padding:1.2rem;display:grid;gap:.5rem;font-size:1.2rem}
@media (min-width:768px){.intro .features{left:64%;width:36%;top:0;padding:1.2rem 0;gap:1rem}}
@media (min-width:1280px){.intro .features{padding:1.8rem 0}}
.intro .features>div{display:flex;align-items:center;gap:.8rem;opacity:0}
.intro .product{position:absolute;left:0;bottom:11rem;width:100%;height:calc(100% - 11rem);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;padding:0 .5rem;overflow:visible}
@media (min-width:1024px){.intro .product{align-items:flex-start;z-index:4;bottom:0;height:100%;overflow:hidden}}
.intro .product .inner{position:relative;height:100%;width:100%;max-width:100%;display:flex;justify-content:center;align-items:flex-end}
.intro .product img.lit{position:absolute;left:0;right:0;bottom:0;margin:0 auto;opacity:0}
@media (min-width:1024px){.intro .product img.lit{transform:translateX(14%)}}
.intro .product img{height:62%;width:auto;max-width:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 4rem 5rem rgba(46,37,33,.35))}
@media (min-width:1024px){.intro .product img{height:80%;transform:translateX(14%)}}
.intro .bottom{position:absolute;bottom:0;width:100%;opacity:0;z-index:3}
.intro .bottom h4{padding:0 1.2rem;margin-bottom:1.2rem;max-width:22rem}
@media (min-width:768px){.intro .bottom h4{max-width:34rem;margin-bottom:2.5rem}}
@media (min-width:1280px){.intro .bottom h4{padding:0 1.8rem}}
.intro .foot{display:flex;align-items:center;justify-content:space-between;padding:1.2rem;text-transform:uppercase;font-size:1rem}
@media (min-width:768px){.intro .foot{font-size:1.2rem}}
@media (min-width:1280px){.intro .foot{padding:1.8rem}}
.intro .loadbar{position:absolute;left:0;top:0;width:100%;height:1px;background:currentColor;opacity:.4;transform:scaleX(0);transform-origin:left}
.intro .progress{position:absolute;top:2rem;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:1rem;letter-spacing:.1em;transition:opacity .35s}
html.is-loaded .intro .progress{opacity:0}

/* ---------- chained content (narrative on nature) ---------- */
.chained{position:relative;min-height:100vh;display:grid;color:var(--cream)}
.chained .sticky-bg{position:sticky;top:0;width:100%;height:100vh;height:100svh;grid-column:1;grid-row:1;overflow:hidden;background:#1f2418}
.chained .sticky-bg picture{position:absolute;left:0;top:0;width:100%;height:auto}
.chained .sticky-bg img{width:100%;min-height:100vh;object-fit:cover;will-change:transform;filter:brightness(1.12)}
.chained .sticky-bg .dim{position:absolute;inset:0;background:rgba(20,22,14,.12)}
.chained .content{position:sticky;top:0;width:100%;height:100vh;height:100svh;grid-column:1;grid-row:1;display:grid;padding:1.2rem}
@media (min-width:1280px){.chained .content{padding:1.8rem}}
.chained .content>h2{grid-column:1;grid-row:1;align-self:center;justify-self:center;text-align:center;margin:0;width:100%;max-width:42rem;padding:0 3rem;letter-spacing:normal}
@media (min-width:1024px){.chained .content>h2{max-width:56rem}}
@media (min-width:1280px){.chained .content>h2{max-width:68rem}}
[data-content-title]{display:block}
.chained .desc-parent{position:absolute;right:1.2rem;bottom:1.2rem;width:22rem;overflow:hidden;opacity:0;background:color-mix(in srgb,var(--bronze) 10%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:1rem}
@media (min-width:768px){.chained .desc-parent{right:1.8rem;bottom:1.8rem;width:26rem}}
.chained .desc-parent .desc{display:grid;gap:1rem;padding:1.6rem}
.chained .desc-parent .desc p{font-size:1.2rem;line-height:1.4}
.chained .spacer{grid-column:1;grid-row:1;height:450vh;pointer-events:none}

/* ---------- chained product (dark pinned close-ups) ---------- */
.chained-product{position:relative;background:var(--gray-900);color:var(--cream)}
.chained-product .stage{position:relative;min-height:100vh;display:grid}
.chained-product .panel{position:sticky;top:0;width:100%;height:100vh;height:100svh;grid-column:1;grid-row:1;overflow:hidden;background:var(--gray-900);display:flex;flex-direction:column}
.chained-product .panel.p1{z-index:4}.chained-product .panel.p2{z-index:3}.chained-product .panel.p3{z-index:2}.chained-product .panel.p4{z-index:1}
.chained-product .panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chained-product .panel.p1 img{object-fit:cover;object-position:50% 50%;height:100%}
.chained-product .panel.p2 img{object-fit:cover;object-position:50% 50%;height:100%}
.chained-product .panel.p3 img{object-position:50% 50%}
.chained-product .panel.p4 img{object-position:50% 50%}
.chained-product .panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,37,33,0) 55%,rgba(46,37,33,.55) 100%)}
.chained-product .overlay{position:sticky;top:0;grid-column:1;grid-row:1;height:100vh;height:100svh;display:flex;align-items:flex-end;pointer-events:none;z-index:6}
@media (min-width:768px){.chained-product .overlay{align-items:flex-start}}
.chained-product .desc-parent{position:absolute;right:1.2rem;bottom:1.2rem;width:24rem;overflow:hidden;pointer-events:auto;background:color-mix(in srgb,var(--bronze) 10%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:1rem}
@media (min-width:768px){.chained-product .desc-parent{right:1.8rem;top:14rem;bottom:auto;width:28rem}}
.chained-product .desc{display:grid;gap:1rem;padding:1.6rem}
.chained-product .desc h3{margin:0 0 .2rem;font-size:2rem}
@media (min-width:768px){.chained-product .desc h3{font-size:3.6rem}}
.chained-product .desc p{font-size:1.2rem;line-height:1.4;opacity:.9}
.chained-product .conn{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}
@media (min-width:1024px){.chained-product .conn{display:block}}
.chained-product .conn path{fill:none;stroke:rgba(252,246,236,.5);stroke-width:1;stroke-dasharray:3 4}
.chained-product .point{position:absolute;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--cream);box-shadow:0 0 0 .8rem rgba(252,246,236,.15);transform:translate(-50%,-50%);display:none}
@media (min-width:1024px){.chained-product .point{display:block}}
.chained-product .spacer{grid-column:1;grid-row:1;height:400vh;pointer-events:none}

/* ---------- star-mask (fiber station) ---------- */
.station{position:relative;z-index:1;color:var(--cream);margin-bottom:-100vh;margin-bottom:-100svh}
.station .marq-wrap{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;display:flex;align-items:center;overflow:hidden;background:var(--gray-900)}
.station .bgwrap{position:sticky;top:0;width:100%;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;overflow:hidden;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23000' d='M50 0c4 22 12 34 50 50-38 16-46 28-50 50-4-22-12-34-50-50C38 34 46 22 50 0z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23000' d='M50 0c4 22 12 34 50 50-38 16-46 28-50 50-4-22-12-34-50-50C38 34 46 22 50 0z'/%3E%3C/svg%3E");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:200px;-webkit-mask-size:200px}
.station .bgwrap picture{position:absolute;left:0;top:0;width:100%}
.station .bgwrap img{width:100%;min-height:100vh;object-fit:cover}
.station .order-wrap{position:relative;z-index:3;height:100vh;height:100svh;margin-top:130vh;display:flex;align-items:center;justify-content:center}
.station .counter-wrap{position:sticky;top:0;z-index:2;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;overflow:hidden;pointer-events:none}
.station .counter-wrap .h2{margin:0;line-height:.9;letter-spacing:-.08em;display:flex;justify-content:center}
.station .counter-wrap .h2 span{display:inline-block;font-variant-numeric:tabular-nums}
.station .counter-wrap p{max-width:30rem;margin-top:1.6rem;font-size:1.2rem}
.station .spacer{height:100vh;height:100svh;pointer-events:none}
.marquee{overflow:hidden;white-space:nowrap;width:100%;text-transform:uppercase;font-weight:500;font-size:5rem;line-height:1;letter-spacing:-.02em;display:flex}
@media (min-width:768px){.marquee{font-size:14rem}}
@media (min-width:1280px){.marquee{font-size:20rem;letter-spacing:-.04em}}
.marquee span{display:inline-block;padding-right:.4em;flex-shrink:0;will-change:transform}
.marquee.dim{opacity:.35}

/* order card */
.order-card{background:var(--cream);color:var(--gray-900);border-radius:1rem;padding:1.2rem;width:100%;max-width:45.6rem;display:grid;gap:1rem;position:relative}
@media (min-width:768px){.order-card{padding:1rem;max-width:82rem;grid-template-columns:1fr 1fr}.order-card.narrow{max-width:45.6rem;grid-template-columns:1fr}}
.order-card .pic{border-radius:.6rem;overflow:hidden;aspect-ratio:4/3}
.order-card .pic img{width:100%;height:100%;object-fit:cover}
.order-card .form{display:flex;flex-direction:column;padding:.6rem}
.order-card .form .glyph{width:2.6rem;height:2.6rem;margin-bottom:1.2rem;opacity:.5}
.order-card .form h4{margin-bottom:.8rem}
.order-card .form .lead{font-size:1.2rem;margin-bottom:1.6rem;display:flex;align-items:center;gap:.6rem}
.order-card .form .price{font-size:1.2rem;margin-bottom:1.6rem}
.order-card .opts{display:flex;gap:1.8rem;margin-bottom:2rem;flex-wrap:wrap}
.order-card .opt{display:inline-flex;align-items:center;gap:.8rem;font-size:1.2rem;cursor:pointer;opacity:.45;transition:opacity .3s}
.order-card .opt.is-active{opacity:1}
.order-card .opt i{width:1.8rem;height:1.8rem;border-radius:50%;border:1px solid var(--gray-900);position:relative;flex-shrink:0}
.order-card .opt.is-active i::after{content:"";position:absolute;inset:.35rem;border-radius:50%;background:var(--gray-900)}
.order-card .fine{font-size:1rem;opacity:.6;margin-top:1rem;line-height:1.4}
.order-card .fine a{text-decoration:underline}

/* ---------- numbered chapter rows ---------- */
.chapter{padding-bottom:10rem;position:relative}
@media (min-width:1280px){.chapter{padding-bottom:25rem}}
.chapter .num-row{padding:4rem 0 2rem;position:relative}
@media (min-width:768px){.chapter .num-row{padding:6rem 0 3.5rem}}
@media (min-width:1280px){.chapter .num-row{padding:10rem 0 3.5rem}}
.chapter .num-row::after{content:"";position:absolute;left:1.2rem;right:1.2rem;bottom:0;height:1px;background:currentColor;opacity:.15}
@media (min-width:1280px){.chapter .num-row::after{left:1.8rem;right:1.8rem}}
.chapter .num-row .num{grid-column:span 4;margin:0}
.chapter .num-row h3{grid-column:span 8;margin:0}
.chapter .body{padding-top:4rem}
@media (min-width:768px){.chapter .body{padding-top:5rem}}
.abc{display:grid;gap:1rem;max-width:37rem}
.abc li{display:grid;grid-template-columns:2.4rem 1fr;gap:1rem;font-size:1.2rem;line-height:1.4}
.abc li b{font-weight:400;opacity:.6}
.iconlist{display:grid;gap:1rem}
@media (min-width:768px){.iconlist{gap:1.5rem}}
.iconlist li{display:flex;align-items:center;gap:1.2rem;font-size:1.2rem}
.iconlist .icon--l{width:4.4rem;height:4.4rem;padding:1.2rem}

/* diagrams (line art on cream like ayocin's videos) */
.diagram{width:100%;aspect-ratio:912/838;border-radius:1rem;background:#EFE9DF;overflow:hidden;display:flex;align-items:center;justify-content:center}
.diagram svg{width:78%;height:78%;overflow:visible}
.diagram svg *{fill:none;stroke:#8C8074;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.diagram svg .fill{fill:#D9D0C2;stroke:none;opacity:.6}
.diagram svg .faint{stroke:#C8BEAF}
.diagram svg text{fill:#8C8074;stroke:none;font-family:var(--mono);font-size:7px;letter-spacing:.08em}
.diagram .gel{animation:gelrise 6s ease-in-out infinite;transform-origin:50% 100%}
.diagram .flakes circle{animation:flake 3s linear infinite}
.diagram .flakes circle:nth-child(2){animation-delay:-.8s}.diagram .flakes circle:nth-child(3){animation-delay:-1.6s}.diagram .flakes circle:nth-child(4){animation-delay:-2.3s}
.diagram .capsule{animation:capfade 5s ease-in-out infinite}
.diagram .cap-split{animation:capsplit 5s ease-in-out infinite}
.diagram .level{animation:level 5s ease-in-out infinite;transform-origin:50% 100%}
.diagram .rise{animation:rise 2.2s ease-in-out infinite}
.diagram .orbit{animation:orbit 8s linear infinite;transform-origin:100px 64px}
@keyframes gelrise{0%,15%{transform:scaleY(.35)}55%,80%{transform:scaleY(1)}100%{transform:scaleY(.35)}}
@keyframes flake{0%{transform:translateY(-30px);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(60px);opacity:0}}
@keyframes capfade{0%,30%{opacity:1}45%,85%{opacity:0}100%{opacity:1}}
@keyframes capsplit{0%,30%{opacity:0;transform:translateX(0)}45%{opacity:1}70%,85%{opacity:1;transform:translateX(0)}100%{opacity:0}}
.diagram .cap-split rect:first-child{animation:splitL 5s ease-in-out infinite}.diagram .cap-split rect:last-child{animation:splitR 5s ease-in-out infinite}
@keyframes splitL{0%,45%{transform:translateX(16px)}70%,85%{transform:translateX(0)}100%{transform:translateX(16px)}}
@keyframes splitR{0%,45%{transform:translateX(-16px)}70%,85%{transform:translateX(0)}100%{transform:translateX(-16px)}}
@keyframes level{0%,10%{transform:scaleY(.5)}60%,85%{transform:scaleY(1.9)}100%{transform:scaleY(.5)}}
@keyframes rise{0%{transform:translateY(6px);opacity:.3}50%{transform:translateY(-6px);opacity:1}100%{transform:translateY(6px);opacity:.3}}
@keyframes orbit{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.diagram *{animation:none!important}}

/* how-it-works trio */
.trio{display:grid;gap:3rem;padding-top:4rem}
@media (min-width:768px){.trio{grid-template-columns:repeat(12,1fr);column-gap:1.8rem;row-gap:0;padding-top:13rem}}
.trio>div{grid-column:span 4}
.trio .lbl{display:flex;align-items:center;gap:.6rem;margin:2rem 0 1rem}
.trio h4{margin:0;font-size:2rem}
@media (min-width:768px){.trio h4{font-size:2.4rem}}

/* ---------- quiet (Nothing to stir) ---------- */
.quiet{position:relative;overflow:hidden;padding:10rem 0;color:var(--cream);background:#120e0c}
@media (min-width:768px){.quiet{padding:4rem 0 12rem}}
@media (min-width:1280px){.quiet{padding-bottom:25rem}}
.quiet .bg{position:absolute;inset:0}
.quiet .bg img{width:100%;height:100%;object-fit:cover;opacity:.85}
.quiet .title{position:relative;text-align:center;margin:0 auto;padding:0 4rem;line-height:1;z-index:1}
.quiet .title .line-w+.line-w{margin-top:-.12em}
.quiet .product{position:relative;width:min(64rem,80%);height:26rem;margin:3rem auto 0;overflow:hidden;display:flex;justify-content:center;align-items:flex-start}
@media (min-width:768px){.quiet .product{height:34rem;margin-top:2rem}}
.quiet .product img{width:100%;height:auto;flex:none;filter:drop-shadow(0 4rem 5rem rgba(0,0,0,.6))}
.quiet .order-wrap{position:relative;display:flex;justify-content:center;margin-top:-10rem}
@media (min-width:768px){.quiet .order-wrap{margin-top:-16rem}}

/* ---------- sun (golden) ---------- */
.sun{position:relative;display:block;padding-top:6rem;color:var(--cream);background:var(--gray-900)}
@media (min-width:1280px){.sun{padding-top:7.5rem}}
.sun .bg{position:absolute;inset:0;overflow:hidden}
.sun .bg img{width:100%;height:100%;object-fit:cover;min-height:100vh;will-change:transform}
.sun .marq{position:relative;z-index:1;overflow:hidden}
.sun .block{position:relative;z-index:1;padding:4rem 0 10rem;border-bottom:1px solid rgba(252,246,236,.2)}
@media (min-width:768px){.sun .block{padding:5rem 0 10rem}}
@media (min-width:1280px){.sun .block.first{padding-bottom:20rem}}
.sun .block .letter{grid-column:span 4;margin:0;display:none}
@media (min-width:768px){.sun .block .letter{display:block}}
.sun .block h4.t{grid-column:span 4;max-width:23rem;margin:0}
@media (min-width:768px){.sun .block h4.t{max-width:40rem}}
.sun .block .txt{grid-column:span 4;display:grid;gap:1.6rem;font-size:1.2rem;line-height:1.4}
.sun .benefits{position:relative;z-index:1;padding:4rem 0 10rem}
@media (min-width:1280px){.sun .benefits{padding-bottom:25rem}}
.sun .benefits .lbl{grid-column:span 4;font-size:1rem;text-transform:uppercase;display:flex;align-items:center;gap:.5rem}
.sun .benefits .items{grid-column:span 8;display:grid;gap:2rem}
@media (min-width:768px){.sun .benefits .items{grid-template-columns:1fr 1fr;column-gap:1.8rem}}
.sun .benefits .items>div{display:grid;gap:1rem;align-content:start}
.sun .benefits .items p{font-size:1.2rem;line-height:1.4}

/* ---------- clean label (dark) ---------- */
.clean{background:var(--gray-900);color:var(--cream);overflow:hidden}
.clean .body2{padding:4rem 0 10rem}
@media (min-width:1280px){.clean .body2{padding:5rem 0 25rem}}
.clean .body2 h3.h4{grid-column:span 4;max-width:40rem;margin:0 0 2rem}
.clean .body2 .pic{grid-column:span 4;border-radius:1rem;overflow:hidden}
.clean .body2 .pic img{width:100%;aspect-ratio:1142/824;object-fit:cover}
.clean .body2 .txt{grid-column:span 4;display:grid;gap:1.6rem;font-size:1.2rem;line-height:1.4;align-content:start}
.clean .facts{padding:4rem 0 10rem;position:relative}
@media (min-width:1280px){.clean .facts{padding:5rem 0 14rem}}
.clean .facts h3.h4{grid-column:span 12;margin:0 0 2rem}
.clean .facts .cells{grid-column:span 12;display:grid;gap:1.2rem;margin-bottom:4rem}
@media (min-width:768px){.clean .facts .cells{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.clean .facts .cells{grid-template-columns:repeat(4,1fr)}}
.clean .facts .cell{background:color-mix(in srgb,var(--cream) 6%,transparent);border-radius:1rem;padding:2rem;display:grid;gap:1.6rem;align-content:start;font-size:1.2rem;min-height:12rem}
.clean .made{align-items:end;position:relative}
.clean .made h3.h4{grid-column:span 4;margin:0 0 2rem}
.clean .made .def{grid-column:span 4;display:grid;gap:1rem;margin-bottom:3rem}
@media (min-width:1280px){.clean .made .def{padding-right:3rem}}
.clean .made .def li{display:grid;grid-template-columns:2.4rem 1fr;gap:1rem;font-size:1.2rem;line-height:1.4}
.clean .made .def li b{font-weight:400;opacity:.6}
.clean .made .ctrl{grid-column:span 8;position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:3rem;padding-right:2rem}
@media (min-width:768px){.clean .made .ctrl{grid-column:5/span 8}}
.clean .made .ctrl .imgs{position:relative;border-radius:1rem;overflow:hidden;aspect-ratio:4/3}
.clean .made .ctrl .imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.clean .made .ctrl .imgs img.on{opacity:0}
.clean .made .drag{width:4rem;height:22rem;position:relative;display:flex;flex-direction:column;align-items:center}
.clean .made .drag .rail{position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(252,246,236,.3)}
.clean .made .drag .knob{position:absolute;top:0;left:50%;width:3.2rem;height:3.2rem;margin-left:-1.6rem;border-radius:50%;background:var(--cream);cursor:grab;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 .8rem rgba(252,246,236,.12)}
.clean .made .drag .knob::after{content:"";width:.8rem;height:.8rem;border-radius:50%;background:var(--gray-900)}
.clean .made .drag .hint{position:absolute;bottom:-3.2rem;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:1rem;text-transform:uppercase;letter-spacing:.08em;opacity:.6;text-align:center;line-height:1.3}

/* ---------- stacked content (routine) ---------- */
.routine{background:var(--cream);color:var(--gray-900);padding:4rem 0 6rem}
@media (min-width:768px){.routine{padding:0 0 0}}
@media (min-width:1280px){.routine{padding-bottom:10rem}}
.routine .sticky{position:sticky;top:6rem;display:flex;flex-direction:column;min-height:calc(100vh - 6rem)}
@media (min-width:768px){.routine .sticky{top:0;min-height:100vh;padding-top:13rem}}
.routine .inner{display:grid;gap:2rem;flex-grow:1}
@media (min-width:768px){.routine .inner{grid-template-columns:repeat(12,1fr);column-gap:1.8rem}}
.routine .left{grid-column:span 4;display:flex;flex-direction:column}
.routine .left .h3{margin:0;letter-spacing:-.02em}
.routine .left .items{margin-top:auto;position:relative;display:grid}
.routine .item{grid-column:1;grid-row:1;display:grid;gap:1rem;align-content:end;padding-bottom:2rem}
.routine .item .letter{font-size:2rem;font-weight:500}
@media (min-width:768px){.routine .item .letter{font-size:3.6rem}}
.routine .item h3{margin:0;font-size:2rem}
@media (min-width:768px){.routine .item h3{font-size:3.6rem}}
.routine .item p{font-size:1.2rem;line-height:1.4;max-width:30rem}
.routine .right{grid-column:5/span 8;position:relative;display:grid;border-radius:1rem;overflow:hidden;aspect-ratio:1860/1620;background:#E6DED0}
.routine .right .large{grid-column:1;grid-row:1;width:100%;height:100%;object-fit:cover}
.routine .spacer{height:250vh}
@media (min-width:768px){.routine .spacer{height:300vh}}

/* ---------- fits your day ---------- */
.fits .pair{padding:4rem 0 10rem;display:grid;gap:1.2rem}
@media (min-width:768px){.fits .pair{grid-template-columns:repeat(12,1fr);column-gap:1.8rem;padding:8rem 0 25rem}}
.fits .pair>div{grid-column:span 6;position:relative;border-radius:1rem;overflow:hidden;aspect-ratio:4/3;color:var(--cream)}
.fits .pair img{width:100%;height:100%;object-fit:cover}
.fits .pair .tag{position:absolute;left:2rem;top:2rem;padding:1rem 2rem;border:2px solid rgba(252,246,236,.1);border-radius:3rem;backdrop-filter:blur(8px);font-size:1.2rem}
.fits .pair h4{position:absolute;left:2rem;bottom:2rem;margin:0;max-width:26rem}
.fits .pair small{position:absolute;right:2rem;bottom:2rem;font-size:1rem;opacity:.7}

/* ---------- showcase (two sizes) ---------- */
.showcase{background:var(--gray-900);color:var(--cream);position:relative;z-index:2;padding-bottom:1.2rem}
.showcase .top{text-align:center;padding-top:8rem}
@media (min-width:768px){.showcase .top{padding-top:10rem}}
.showcase .gradient-title{margin:0 0 .5rem -1.2rem;margin-right:-1.2rem;letter-spacing:-.06em}
.showcase .gradient-title .line-w{display:flex;justify-content:center}
.showcase .gradient-title .line-w:last-child{margin-top:-.3em}
.showcase .gradient-title .line-w:last-child .line{display:inline-flex;background-image:linear-gradient(90deg,#ff7d5e,#fec873,#baaca1,#ff7d5e,#fec873,#baaca1,#ff7d5e);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 10s linear infinite}
@keyframes shine{to{background-position:200% center}}
.showcase .hero-img{width:min(46rem,70%);margin:-4rem auto 0;position:relative;z-index:1}
@media (min-width:768px){.showcase .hero-img{margin-top:-10rem}}
.showcase .hero-img img{width:100%;height:auto;filter:drop-shadow(0 6rem 6rem rgba(0,0,0,.5))}
.showcase .body{position:relative;z-index:2;margin-bottom:-1px}
.showcase .body .row{padding:2rem;display:grid;gap:2rem}
@media (min-width:768px){.showcase .body .row{padding:6rem 0 0;grid-template-columns:repeat(12,1fr);column-gap:1.2rem;align-items:end}}
.showcase .body .row h3.h4{grid-column:span 4;margin:0}
.showcase .body .row p{grid-column:span 4;font-size:1.2rem;opacity:.8}
.showcase .pick{display:grid;gap:2rem;padding:2rem 0 4rem}
@media (min-width:768px){.showcase .pick{grid-template-columns:repeat(12,1fr);column-gap:2rem;padding:4rem 0 6rem}}
.showcase .pick .card2{grid-column:span 3;background:var(--cream);color:var(--gray-900);border-radius:1rem;padding:1.5rem;display:grid;gap:1.5rem;align-self:start}
@media (min-width:768px){.showcase .pick .card2{position:sticky;top:11rem;max-width:19rem}}
.showcase .pick .card2 .opt{display:flex;align-items:center;gap:.8rem;font-size:1.2rem;opacity:.45;cursor:pointer;transition:opacity .3s}
.showcase .pick .card2 .opt.is-active{opacity:1}
.showcase .pick .card2 .opt i{width:1.8rem;height:1.8rem;border-radius:50%;border:1px solid var(--gray-900);position:relative;flex-shrink:0}
.showcase .pick .card2 .opt.is-active i::after{content:"";position:absolute;inset:.35rem;border-radius:50%;background:var(--gray-900)}
.showcase .pick .stagebox{grid-column:span 6;position:relative;aspect-ratio:1;overflow:hidden}
.showcase .pick .stagebox img{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);height:86%;width:auto;filter:drop-shadow(0 3rem 4rem rgba(0,0,0,.5))}
.showcase .pick .stagebox .dim{position:absolute;font-size:1rem;opacity:.6;text-transform:uppercase;letter-spacing:.08em}
.showcase .pick .stagebox .dim.h{right:8%;top:50%;transform:translateY(-50%) rotate(90deg)}
.showcase .pick .stagebox .dim.w{bottom:2%;left:50%;transform:translateX(-50%)}
.showcase .pick .stagebox .rule{position:absolute;background:rgba(252,246,236,.25)}
.showcase .pick .specs{grid-column:span 3;display:grid;gap:1rem;align-content:start;font-size:1.2rem}
@media (min-width:768px){.showcase .pick .specs{position:sticky;top:11rem}}
.showcase .pick .specs li{display:flex;align-items:center;gap:1rem}

/* ---------- station 2 (dark, image, order) ---------- */
.station2{position:relative;height:250vh;height:250svh;margin-top:-100vh;margin-top:-100svh;background:var(--gray-900);color:var(--cream)}
.station2 .sticky{position:sticky;top:0;overflow:hidden;height:100vh;height:100svh}
.station2 .sticky img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.station2 .sticky .inner{position:relative;height:100%;display:grid;align-items:end;padding:11rem 0 10rem}
@media (min-width:1280px){.station2 .sticky .inner{padding:4rem 0 2rem}}
.station2 .marq{position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);opacity:.9;mix-blend-mode:screen}

/* ---------- faq ---------- */
.faq{padding-bottom:10rem}
@media (min-width:1280px){.faq{padding-bottom:25rem}}
.faq .q{padding:4rem 0 6rem;position:relative}
@media (min-width:768px){.faq .q{padding:1.2rem 0 4rem}}
.faq .q::after{content:"";position:absolute;left:1.2rem;right:1.2rem;bottom:0;height:1px;background:currentColor;opacity:.12}
@media (min-width:1280px){.faq .q::after{left:1.8rem;right:1.8rem}}
.faq .q .n{grid-column:span 4;display:none;margin:0}
@media (min-width:768px){.faq .q .n{display:flex}}
.faq .q h4.t{grid-column:span 4;margin:0 0 1.5rem}
@media (min-width:1024px){.faq .q h4.t{grid-column:span 5;padding-right:6rem}}
.faq .q .a{grid-column:span 4;font-size:1.2rem;line-height:1.4;opacity:.85}
@media (min-width:1024px){.faq .q .a{grid-column:span 3}}
.faq .help{display:flex;justify-content:center;padding-top:4rem;font-weight:500}

/* ---------- gallery ---------- */
.gallery{padding-bottom:10rem;overflow:hidden}
@media (min-width:1280px){.gallery{padding-bottom:25rem}}
.gallery .track{display:flex;gap:1.2rem;will-change:transform}
.gallery .track>div{flex:0 0 74%;aspect-ratio:4/3;border-radius:1rem;overflow:hidden}
@media (min-width:768px){.gallery .track>div{flex:0 0 40%}}
.gallery .track img{width:100%;height:100%;object-fit:cover}
.gallery .ctrls{display:flex;justify-content:center;gap:1rem;margin-top:3rem}

/* ---------- mission ---------- */
.mission{position:relative;padding:10rem 0;overflow:hidden;color:var(--cream)}
@media (min-width:768px){.mission{padding:6rem 0;min-height:60rem}}
@media (min-width:1280px){.mission{padding-top:7.6rem;min-height:100vh}}
.mission .bg{position:absolute;inset:0}
.mission .bg img{width:100%;height:100%;object-fit:cover}
.mission .bg::after{content:"";position:absolute;inset:0;background:rgba(46,37,33,.35)}
.mission .inner{position:relative;padding-top:4rem}
.mission .brand{grid-column:span 12;font-size:1.2rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:6rem}
@media (min-width:768px){.mission .brand{grid-column:span 4;order:3;margin:0;justify-self:end}}
.mission h4.t{grid-column:span 4;margin:0 0 1rem}
.mission .txt{grid-column:span 4;display:grid;gap:1.6rem;font-size:1.2rem;line-height:1.4}

/* ---------- footer ---------- */
.footer{background:var(--gray-900);color:var(--cream)}
@media (min-width:768px){.footer{position:sticky;bottom:0;z-index:-1}}
.footer .cols{display:grid}
@media (min-width:768px){.footer .cols{grid-template-columns:repeat(12,1fr)}}
.footer .col{grid-column:span 3;padding:4rem 1.2rem 6rem}
@media (min-width:768px){.footer .col{padding:2rem 1.2rem 12rem}}
@media (min-width:1280px){.footer .col{padding-left:1.8rem;padding-right:1.8rem}}
.footer .col .lbl{text-transform:uppercase;opacity:.4;font-size:1rem;padding-bottom:2rem}
.footer .col ul{display:grid;gap:1rem}
@media (min-width:768px){.footer .col ul{gap:1.2rem}}
.footer .col .email{font-size:2rem}
@media (min-width:768px){.footer .col .email{font-size:3.6rem}}
.footer .sub{max-width:26rem;display:grid;gap:1.2rem}
@media (min-width:768px){.footer .sub{max-width:21rem}}
.footer .sub p{font-size:1.2rem;opacity:.8}
.footer .sub input{width:100%;height:4rem;border-radius:2rem;border:1px solid rgba(252,246,236,.25);background:transparent;color:var(--cream);padding:0 1.6rem;font:inherit;font-size:1.2rem;outline:none}
.footer .sub input:focus{border-color:var(--cream)}
.footer .bottom{padding:2rem 1.2rem;border-top:1px solid rgba(252,246,236,.2);text-transform:uppercase;opacity:.4;font-size:1rem;display:grid;gap:1rem}
@media (min-width:768px){.footer .bottom{grid-template-columns:repeat(12,1fr)}}
@media (min-width:1280px){.footer .bottom{padding-left:1.8rem;padding-right:1.8rem}}
.footer .bottom>*{grid-column:span 4}

/* ---------- utilities used by JS ---------- */
[data-animation="moveUp"],[data-animation="fade"]{opacity:0}
.will-change{will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){
  html,body{position:static;overflow:auto;height:auto}
  .wrapper{position:static;overflow:visible}
  [data-animation]{opacity:1!important;transform:none!important}
  .line-w .line{transform:none!important}
  .intro .product,.intro .bottom,.intro .features>div{opacity:1!important}
}

/* ---------- 手机端栅格收口（2026-09-11 验收发现：12 栏在 <768 未回退，正文被压成 114px 三栏） ---------- */
/* 1. 容器横向内边距：段落用 padding 简写把 .container 的左右清零了，这里按同等特异性补回来 */
.container.container{padding-left:1.2rem;padding-right:1.2rem}
@media (min-width:1280px){.container.container{padding-left:1.8rem;padding-right:1.8rem}}
/* 2. <768 时 12 栏一律单列（行内 grid-column 也要压住） */
@media (max-width:767px){
  .grid12>*{grid-column:1 / -1 !important}
  .chapter .body>*,.clean .body2>*,.clean .made>*,.sun .benefits>*,.fits .pair>*{grid-column:1 / -1 !important}
  .routine .left,.routine .right{grid-column:1 / -1 !important}
  .faq .q>*{grid-column:1 / -1 !important}
  .faq .q .n{margin-bottom:.4rem}
  .clean .made [style*="grid-column"]{grid-column:1 / -1 !important}
  /* 3. 吸顶标题要躲开手机端 70px 高的 header */
  .routine .sticky{top:8.5rem;min-height:calc(100vh - 8.5rem)}
}