/* XANMI 2026 — original art-direction system. All color tokens separated by role.
   Brand official: blue/gold/green; product & editorial UI are distinct. */
:root{--x-brand-blue:#0066A6;--x-brand-gold:#C9AF49;--x-brand-green:#677B69;--x-lavender:#dcd0e8;--x-deep:#392c48;--x-paper:#faf9f5;--x-ink:#302b34;--x-muted:#776e7b;--x-line:#d9d1d8;--x-font-en:'Comfortaa',sans-serif;--x-font-th:'IBM Plex Sans Thai',sans-serif}
html{scroll-behavior:smooth;scroll-padding-top:75px}body{background:var(--x-paper)}
.xv12{overflow:clip;font-family:var(--x-font-th);color:var(--x-ink)}.xv12 a{text-decoration:none}.xv12 img{display:block}.xv12 button{font:inherit}.xv12 :focus-visible{outline:3px solid var(--x-brand-blue);outline-offset:5px}
.xv12-eyebrow,.xv12-small-head{font:600 10px/1.6 var(--x-font-en);letter-spacing:.17em;color:#77657f}
.xv12-button{min-height:52px;display:inline-flex;align-items:center;justify-content:space-between;gap:48px;border-radius:2px;background:#4f3a60;color:white;padding:14px 23px;font:500 12px/1.5 var(--x-font-th);transition:background .25s,transform .25s}
.xv12-button:hover{background:#684b7c;transform:translateY(-2px)}.xv12-button:visited{color:white}.xv12-textlink{color:#51485a;display:inline-flex;gap:18px;border-bottom:1px solid #a79cab;padding:13px 0;font-size:12px}.xv12-underline{display:inline-block;border-bottom:1px solid currentColor;padding-bottom:13px;color:#44354d;font-size:13px}
/* 01: deliberate product-led first screen */
.xv12-hero{min-height:calc(100svh - 75px);position:relative;overflow:hidden;background:linear-gradient(118deg,#fbfafb 0%,#f8f6fa 40%,#e9deee 100%);isolation:isolate}.xv12-hero-grain{position:absolute;inset:0;opacity:.33;background:radial-gradient(circle at 10% 30%,white 0,transparent 34%),radial-gradient(circle at 90% 10%,#d8c6e7 0,transparent 45%);pointer-events:none}.xv12-hero-inner{max-width:1660px;min-height:calc(100svh - 116px);margin:auto;display:grid;grid-template-columns:53% 47%;align-items:center;position:relative}.xv12-hero-copy{z-index:5;padding:6vh 0 9vh clamp(40px,8vw,150px)}.xv12-line{display:inline-block;vertical-align:middle;height:1px;width:38px;background:#bdb3bc;margin:0 11px}.xv12-japanese{font-size:28px;letter-spacing:.09em;font-weight:400;color:#8d729e;margin:clamp(35px,6vh,80px) 0 9px}.xv12-hero h1{font:500 clamp(65px,7.5vw,131px)/1.1 var(--x-font-en);letter-spacing:-.065em;color:#44334f;margin:0 0 23px}.xv12-period{color:#9c79af}.xv12-lead{font:500 clamp(21px,2vw,30px)/1.65 var(--x-font-th);color:#504256;margin:0 0 12px}.xv12-summary{font:400 14px/2 var(--x-font-th);color:#6f6772;max-width:495px;margin:0 0 30px}.xv12-hero-actions{display:flex;gap:35px;align-items:center;flex-wrap:wrap}.xv12-sachet-meta{font:500 9px/1.3 var(--x-font-en);color:#817586;display:flex;gap:19px;flex-wrap:wrap;letter-spacing:.08em;margin:clamp(30px,6vh,70px) 0 0}.xv12-sachet-meta span+span{border-left:1px solid #c6bdca;padding-left:19px}
.xv12-hero-picture{position:relative;min-height:min(78vh,780px);height:100%;display:flex;align-items:center;justify-content:center}.xv12-disc{position:absolute;width:71%;aspect-ratio:1;max-height:78%;border-radius:50%;background:radial-gradient(circle at 32% 20%,#f8f3fa 1%,#d8c7e4 75%,#baa2cc 100%);top:11%;left:13%;box-shadow:40px 28px 90px #9c7eab1b}.xv12-hero-product{height:min(66vh,685px);max-width:75%;object-fit:contain;filter:drop-shadow(21px 32px 19px #3d24592a);position:absolute;top:12%;left:40%;z-index:3;transform:rotate(-3deg)}.xv12-hero-rice{position:absolute;width:32%;height:58%;object-fit:contain;bottom:0;left:-1%;z-index:2;transform:rotate(-10deg)}.xv12-hero-fruit{width:20%;max-width:200px;position:absolute;right:14%;bottom:15%;z-index:4;filter:drop-shadow(11px 12px 9px #39263d28)}.xv12-vertical{position:absolute;right:8%;top:15%;writing-mode:vertical-rl;letter-spacing:.2em;color:#977ea3;font-size:12px;z-index:2}.xv12-image-credit{position:absolute;bottom:5%;right:9%;font:500 9px var(--x-font-en);color:#8b7991;letter-spacing:.15em}.xv12-scroll-cue{position:absolute;bottom:22px;left:clamp(40px,8vw,150px);display:flex;align-items:center;gap:19px;font:500 10px var(--x-font-en);color:#8e7c91;letter-spacing:.15em}
/* 02: gentle dark-to-light transition tied to scroll progress (not camera flash) */
.xv12-bridge{height:177svh;position:relative;background:#30263e}.xv12-bridge-sticky{height:100svh;position:sticky;top:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(155deg,#30263e,#5b446c)}.xv12-bridge-wash{position:absolute;inset:0;background:linear-gradient(158deg,#f3ecf5,#fdfcfb 78%);opacity:var(--bridge-wash,0);pointer-events:none}.xv12-bridge-copy{position:relative;z-index:3;text-align:center;color:#fff;max-width:920px;padding:12vw;opacity:var(--bridge-copy,1);transform:translate3d(0,var(--bridge-y,0px),0)}.xv12-bridge-copy>span{font:600 10px var(--x-font-en);letter-spacing:.19em;opacity:.8}.xv12-bridge-copy h2{font-size:clamp(37px,5.7vw,90px);font-weight:400;line-height:1.55;margin:23px 0}.xv12-bridge-copy p{font-size:clamp(16px,2vw,24px);line-height:1.5}.xv12-bridge-rice{position:absolute;left:-1%;bottom:-10%;width:25%;height:63%;object-fit:contain;opacity:var(--bridge-plants,0);transform:rotate(-13deg)}.xv12-bridge-mango{position:absolute;right:8%;bottom:11%;width:13%;max-width:160px;opacity:var(--bridge-plants,0)}.xv12-bridge-caption{position:absolute;bottom:27px;left:6%;color:#918398;font:500 9px var(--x-font-en);letter-spacing:.14em;opacity:var(--bridge-caption,0)}
/* 03: sticky pinned stage + independent story panels */
.xv12-story{background:#fff}.xv12-story-sticky{display:grid;grid-template-columns:52% 48%;min-height:calc(100svh - 74px)}.xv12-story-visual{min-height:680px;position:relative;overflow:hidden;background:#eff0f2;isolation:isolate}.xv12-backdrop{position:absolute;inset:0;background:linear-gradient(130deg,#e9eced,#f9f8f7);transition:background .4s}.xv12-story[data-scene='mangosteen'] .xv12-backdrop{background:linear-gradient(150deg,#ebe3ed,#f7eef7)}.xv12-story[data-scene='craft'] .xv12-backdrop{background:linear-gradient(160deg,#edeef0,#f4f3f5)}.xv12-story[data-scene='ritual'] .xv12-backdrop{background:linear-gradient(140deg,#e5deeb,#f9f7f9)}.xv12-orbit{position:absolute;left:22%;top:14%;width:60%;aspect-ratio:1;border:1px solid #fff9;border-radius:100%;box-shadow:0 0 0 50px #ffffff13;z-index:1}.xv12-stage-sachet{position:absolute;z-index:4;top:14%;left:36%;height:69%;max-width:64%;object-fit:contain;filter:drop-shadow(17px 31px 17px #3c264c2b);transform:rotate(-2deg)}.xv12-stage-rice{position:absolute;z-index:2;bottom:-6%;left:6%;height:51%;width:32%;object-fit:contain;transform:rotate(-9deg);opacity:var(--rice-opacity,.75)}.xv12-stage-mango{position:absolute;z-index:3;right:10%;bottom:13%;width:23%;max-width:185px;opacity:var(--mango-opacity,.6);filter:drop-shadow(9px 10px 8px #39273d24)}.xv12-stage-label{position:absolute;bottom:5%;left:7%;font:500 10px var(--x-font-en);letter-spacing:.15em;color:#908797}.xv12-story-main{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(40px,5vw,80px) clamp(45px,6vw,115px);padding-right:clamp(40px,7vw,130px);background:#fff;min-width:0}.xv12-story-top,.xv12-story-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;font:500 9px var(--x-font-en);letter-spacing:.1em;color:#979097}.xv12-story-panels{max-width:650px;width:100%;align-self:center}.xv12-panel{margin:0 0 45px}.xv12-panel-index{font:600 10px var(--x-font-en);letter-spacing:.15em;color:#9a86a4}.xv12-panel h2{font:500 clamp(33px,3.7vw,62px)/1.38 var(--x-font-th);color:#352f39;letter-spacing:-.018em;margin:19px 0}.xv12-panel p{font:400 clamp(14px,1.2vw,17px)/1.95 var(--x-font-th);color:#6c656f;max-width:510px}.xv12-panel a{display:inline-flex;margin-top:20px;font-size:13px;padding-bottom:11px;border-bottom:1px solid #c8bbd0;color:#665371}.xv12-story-counter strong{font-size:18px;color:#765b82}.xv12-progress{display:flex;gap:8px}.xv12-progress span{width:25px;height:2px;background:#d6d0d8}.xv12-progress span.active{background:#866a95;width:48px;transition:width .18s}
html.xv12-motion .xv12-story{height:445svh;min-height:2820px;position:relative}html.xv12-motion .xv12-story-sticky{position:sticky;top:75px;height:calc(100svh - 75px);min-height:0}html.xv12-motion .xv12-story-visual{height:100%;min-height:0}html.xv12-motion .xv12-story-panels{height:75%;position:relative;display:block;flex:1}html.xv12-motion .xv12-panel{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,20px,0);will-change:opacity,transform}html.xv12-motion .xv12-panel.active{visibility:visible;pointer-events:auto}
/* 04: editorial statement */
.xv12-manifesto{background:#faf9f5;padding:clamp(100px,14vw,230px) 8vw}.xv12-manifesto-inner{max-width:1120px;margin:auto}.xv12-manifesto-inner>p{color:#9a83a3;font:600 10px var(--x-font-en);letter-spacing:.14em}.xv12-manifesto h2{font:400 clamp(36px,5.4vw,79px)/1.55 var(--x-font-th);max-width:1060px;letter-spacing:-.025em;color:#493953;margin:38px 0}.xv12-manifesto-rule{display:block;width:100%;height:1px;background:#d8ced9;margin-top:48px}.xv12-manifesto-footer{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:25px;color:#817985;font-size:13px}.xv12-manifesto-footer a{color:#574662;border-bottom:1px solid #b6a7bd;padding-bottom:8px}
/* 05: sensory ritual */
.xv12-ritual{display:grid;grid-template-columns:49% 51%;min-height:660px}.xv12-ritual-photo{position:relative;overflow:hidden;background:linear-gradient(155deg,#e5daec,#bca5cd);min-height:570px;display:flex;align-items:center;justify-content:center}.xv12-ritual-photo-disc{position:absolute;width:59%;border-radius:50%;aspect-ratio:1;background:#fff5;box-shadow:0 0 80px #fff7}.xv12-ritual-photo img{position:relative;z-index:2;height:68%;max-width:76%;object-fit:contain;filter:drop-shadow(19px 30px 23px #39244436);transform:rotate(5deg)}.xv12-ritual-photo>span{position:absolute;bottom:31px;left:37px;letter-spacing:.16em;color:#53435d;font:600 10px var(--x-font-en)}.xv12-ritual-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;background:#f8f5f9;padding:clamp(55px,7vw,124px)}.xv12-ritual h2{font:600 clamp(35px,4vw,66px)/1.35 var(--x-font-en);letter-spacing:-.025em;color:#584269;margin:25px 0}.xv12-ritual h2 span{display:block}.xv12-ritual-plus{opacity:.75}.xv12-experience{font-size:.64em;color:#9b80a8;margin-top:14px}.xv12-ritual-copy>p{font-size:15px;line-height:2;color:#716777;max-width:480px}.xv12-ritual-data{display:flex;align-items:center;gap:23px;border-top:1px solid #d3cbd6;border-bottom:1px solid #d3cbd6;padding:15px 0;margin:20px 0}.xv12-ritual-data strong{font:600 22px var(--x-font-en);color:#645276}.xv12-ritual-copy .xv12-footnote{font-size:11px;line-height:1.7;color:#958797}
/* 06: commerce clarity with authentic box photo */
.xv12-product{padding:110px 7vw 135px;background:#fff}.xv12-product-head{display:flex;justify-content:space-between;align-items:end;gap:30px;max-width:1400px;margin:0 auto 42px}.xv12-product-head h2{font:500 clamp(55px,6vw,104px)/1.1 var(--x-font-en);color:#4b3c54;letter-spacing:-.06em;margin:12px 0}.xv12-product-head>p{max-width:370px;color:#766e78;font-size:14px;line-height:1.85}.xv12-product-body{max-width:1400px;margin:auto;display:grid;grid-template-columns:1fr 1fr;min-height:545px}.xv12-product-photo{background:#eee8f1;position:relative;display:flex;align-items:center;justify-content:center;padding:50px}.xv12-product-photo img{width:100%;height:420px;object-fit:contain;mix-blend-mode:multiply}.xv12-product-photo>span{position:absolute;bottom:22px;left:24px;font:500 9px var(--x-font-en);color:#94869d;letter-spacing:.1em}.xv12-product-details{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;background:#f8f6f2;padding:clamp(45px,6vw,90px)}.xv12-product-details h3{font:500 clamp(31px,3.4vw,56px)/1.5 var(--x-font-th);margin:17px 0;color:#4c4153}.xv12-product-details>p{font-size:14px;line-height:1.9;color:#78717a;max-width:450px}.xv12-product-spec{display:flex;gap:23px;margin:33px 0;flex-wrap:wrap}.xv12-product-spec>div{min-width:105px;border-top:1px solid #c5b8c9;padding-top:12px}.xv12-product-spec strong{font:600 21px var(--x-font-en);display:block;color:#604c6b}.xv12-product-spec small{font:500 9px var(--x-font-en);color:#9b8d9f;display:block;margin-top:7px}.xv12-dark{background:#51405b}
/* 07: differentiated beauty lab */
.xv12-beauty{display:grid;grid-template-columns:51% 49%;min-height:635px}.xv12-beauty-copy{background:#f2edf4;padding:clamp(60px,9vw,140px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.xv12-beauty-brand{color:#a99bba;font:500 21px Georgia,serif;margin:25px 0 12px}.xv12-beauty-brand em{font:500 10px var(--x-font-en);letter-spacing:.09em;font-style:normal}.xv12-beauty h2{font:400 clamp(33px,4vw,60px)/1.55 var(--x-font-th);color:#675371;margin:10px 0 20px}.xv12-beauty-copy>p:not(.xv12-beauty-brand){font-size:14px;line-height:1.95;max-width:470px;color:#82748c}.xv12-beauty-art{position:relative;display:flex;align-items:center;justify-content:center;background:#dcd3e4;padding:55px}.xv12-beauty-art img{max-height:520px;max-width:85%;object-fit:contain;box-shadow:18px 24px 35px #5347651d}.xv12-beauty-art>span{position:absolute;bottom:24px;right:24px;font:500 9px var(--x-font-en);color:#806f8b;letter-spacing:.1em}
.xv12-end{min-height:540px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 30px;background:linear-gradient(150deg,#faf9f5,#e5d9e9)}.xv12-end>p{font:600 10px var(--x-font-en);letter-spacing:.15em;color:#957ea0}.xv12-end h2{font:400 clamp(32px,4.3vw,64px)/1.55 var(--x-font-th);color:#574462;max-width:900px;margin:20px auto 30px}.xv12-outline{background:#4c3a55}
@media(min-width:1600px){.xv12-hero-inner{min-height:780px}}
@media(max-width:1100px){.xv12-hero-copy{padding-left:5vw}.xv12-scroll-cue{left:5vw}.xv12-hero h1{font-size:clamp(51px,7vw,94px)}.xv12-hero-picture{min-height:625px}.xv12-stage-sachet{left:31%;height:64%}.xv12-story-main{padding:40px 50px}.xv12-story-top,.xv12-story-bottom{font-size:8px}.xv12-product-spec{gap:12px}}
@media(max-width:770px){html{scroll-padding-top:68px}.xv12-hero{min-height:0}.xv12-hero-inner{display:flex;flex-direction:column;min-height:0}.xv12-hero-copy{padding:37px 7vw 0;width:100%}.xv12-japanese{font-size:21px;margin:23px 0 7px}.xv12-hero h1{font-size:clamp(47px,11vw,75px);margin:0 0 8px}.xv12-lead{font-size:19px}.xv12-summary{font-size:13px;margin-bottom:17px}.xv12-hero-actions{gap:13px}.xv12-button{gap:22px;font-size:12px;min-height:47px;padding:11px 16px}.xv12-sachet-meta{margin-top:23px;gap:8px;font-size:8px}.xv12-sachet-meta span+span{padding-left:8px}.xv12-hero-picture{width:100%;min-height:440px;height:55svh;max-height:530px}.xv12-disc{width:68%;top:6%;left:19%}.xv12-hero-product{height:77%;top:7%;left:45%}.xv12-hero-rice{width:25%;height:57%;left:10%}.xv12-hero-fruit{width:17%;right:13%;bottom:19%}.xv12-vertical{font-size:10px;right:7%}.xv12-scroll-cue{left:7vw;bottom:15px;display:none}.xv12-bridge{height:138svh}.xv12-bridge-copy{padding:8vw}.xv12-bridge-copy h2{font-size:clamp(30px,8vw,56px)}.xv12-story-sticky{display:flex;flex-direction:column}.xv12-story-visual{min-height:350px;height:40svh}.xv12-story-main{min-height:470px;padding:25px 8% 30px}.xv12-story-top{font-size:9px}.xv12-story-bottom{font-size:8px}.xv12-panel h2{font-size:clamp(26px,6.5vw,41px);margin:9px 0 8px}.xv12-panel p{font-size:13px;line-height:1.75}.xv12-panel a{margin-top:7px}.xv12-stage-sachet{height:83%;left:41%;top:4%}.xv12-stage-rice{height:55%;left:15%;width:24%}.xv12-stage-mango{width:17%;right:15%}html.xv12-motion .xv12-story{height:424svh;min-height:2380px}html.xv12-motion .xv12-story-sticky{height:calc(100svh - 67px);top:67px}html.xv12-motion .xv12-story-visual{min-height:0;height:39%;flex:0 0 39%}html.xv12-motion .xv12-story-main{min-height:0;height:61%;flex:0 0 61%;padding:16px 8% 22px}html.xv12-motion .xv12-story-panels{height:100%;flex:1}.xv12-manifesto{padding:110px 7vw}.xv12-manifesto h2{font-size:clamp(30px,6.5vw,49px);line-height:1.55}.xv12-ritual,.xv12-product-body,.xv12-beauty{display:flex;flex-direction:column}.xv12-ritual-photo{min-height:480px;height:55svh}.xv12-ritual-copy{padding:65px 7vw}.xv12-product{padding:75px 6vw}.xv12-product-head{display:block}.xv12-product-head>p{margin-top:5px}.xv12-product-body{min-height:0}.xv12-product-photo{min-height:390px;padding:27px}.xv12-product-photo img{height:350px}.xv12-product-details{padding:50px 8%}.xv12-beauty-art{min-height:460px;padding:37px}.xv12-beauty-art img{height:410px}.xv12-beauty-copy{padding:70px 8%}.xv12-end{min-height:420px}}
@media(max-width:410px){.xv12-hero-copy{padding-top:21px}.xv12-hero h1{font-size:46px}.xv12-hero-picture{min-height:335px;height:41svh}.xv12-stage-label{font-size:8px}.xv12-story-visual{min-height:300px}.xv12-story-main{min-height:475px}.xv12-story-top{font-size:8px}html.xv12-motion .xv12-story-visual{height:34%;flex-basis:34%}html.xv12-motion .xv12-story-main{height:66%;flex-basis:66%}.xv12-panel h2{font-size:27px}.xv12-panel p{font-size:12.5px}.xv12-panel a{font-size:11px}.xv12-product-spec>div{min-width:80px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.xv12 *, .xv12 *::before,.xv12 *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.xv12-bridge{height:auto!important}.xv12-bridge-sticky{position:relative;min-height:65svh;height:auto}.xv12-bridge-copy{opacity:1!important;transform:none!important}.xv12-bridge-wash{opacity:0!important}}