/* Painted scenes and ornaments from the original Dunhuang art collection. */
/* New campaign photographs are layered below the original mural elements. */
body{background:#091e2b}
.page{max-width:460px!important;padding-bottom:0;background:#efe3cb}
.grain{display:none}
.nav{background:#f3e7d1;color:#274c50;padding-inline:24px;border-bottom:1px solid #9d7e492e}
.mark-seal{border-color:#9a7943;color:#8f6a33}.nav-link{color:#466267}
.hero{min-height:710px;height:auto;display:flex;flex-direction:column;padding:0 24px 30px;background:#f1e4c9 url('./assets/art-v1/hero-background.png') center/100% 100% no-repeat;color:#173641;overflow:hidden}
.hero-copy{padding:108px 0 0;max-width:none;text-align:center;flex-shrink:0}
.hero .eyebrow{justify-content:center;color:#8f6a33;font-size:8px;letter-spacing:2px}
.hero h1{font-size:50px;color:#234956;letter-spacing:.13em;margin:15px 0 12px;text-indent:.13em}
.hero p{font-size:11px;color:#56675c;letter-spacing:1px}
.product-stage{position:relative;inset:auto;width:100%;min-height:310px;margin:0;flex:1;align-self:auto}
.hero .product-image{width:100%;height:290px;object-fit:contain;filter:drop-shadow(0 15px 12px #624a3033);margin-top:-15px}
.halo{width:230px;border-color:#ae884b40;box-shadow:none}.halo:before{border-color:#ac844a4d}.halo:after{border-color:#ad854a30}.star{display:none}
.product-key{bottom:5%;}.product-key small{color:#8a6b3e;font-size:8px}.product-key strong{color:#234956;font-size:19px}
.hero-bottom{padding:0 0 30px;grid-template-columns:1fr;gap:13px;justify-items:center;margin-top:5px}
.hero-bottom .story-line{color:#465a55;background:#f5e9d3de;padding:5px 12px;text-align:center;margin:0;max-width:none;font-size:11px}
.hero-bottom .story-line.right{display:none}.hero-bottom .enter{width:auto;height:45px;padding:0 28px;border-radius:0;display:flex;background:#244e50;border:1px solid #b49a63;color:#f1dfb4;font-size:14px}
.hero-bottom .enter:before{content:'寻一色，寄心意';font:12px var(--serif);letter-spacing:2px;margin-right:15px}
.collection{padding:0 20px 40px;background:#f0e4cd url('./assets/art-v1/texture-sandstone.png') center top/100% auto repeat-y;color:#173641}
.collection:before{display:none}
.collection-frontispiece{height:170px;position:relative;overflow:hidden;text-align:center;padding-top:95px;margin:0 -20px 25px;background:#0d3140 url('./assets/art-v1/texture-lapis.png') center/cover;color:#ead4a4}
.collection-frontispiece img{position:absolute;top:-135px;left:50%;transform:translateX(-50%);width:225px;opacity:.92}
.collection-frontispiece span{position:relative;display:block;font:23px var(--serif);letter-spacing:7px}
.collection-frontispiece small{display:block;font:8px Georgia,serif;letter-spacing:2px;color:#bda477;margin-top:13px}
.collection-head{display:block;text-align:center;padding:8px 0 24px;margin:0}
.collection-head h2{font-size:28px;line-height:1.5;letter-spacing:3px}.collection-head h2 br{display:none}
.collection-head .section-label{font:8px Georgia,serif;letter-spacing:2px;color:#8e713e}
.collection-head p{max-width:none;text-align:center;font-size:11px;margin:10px 0 0;line-height:1.9}
.switcher{gap:18px}
.pick{display:block;position:relative;height:230px;padding:25px 18px;text-align:left;isolation:isolate;overflow:hidden;border:1px solid #b89758;background:#efe0bf;color:#234956;box-shadow:0 7px 16px #6f4f2110}
.pick-art{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.pick-art .pick-scene{width:100%;height:100%;object-fit:cover;object-position:center 56%;opacity:.92;position:absolute;inset:0}
.pick-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#f5e7ccfa 0%,#f4e5c9d9 26%,#f5e7cc00 64%);z-index:1}
.pick-art .pick-motif{position:absolute;width:145px;height:135px;object-fit:contain;top:-14px;right:-13px;opacity:.85;z-index:2}
.pick-art .pick-bracelet{position:absolute;right:-8px;bottom:0;width:73%;height:205px;object-fit:contain;filter:drop-shadow(0 8px 7px #57391d40);z-index:3}
.pick-number{display:block;font:italic 14px Georgia,serif;margin:0 0 23px;color:#9b7642;position:relative;z-index:2}
.pick-name{font-size:20px;letter-spacing:2px;writing-mode:vertical-rl;line-height:1.5;margin-left:3px;height:120px;position:relative;z-index:2}
.pick-note{display:none}.pick-dot{position:absolute;left:80px;top:90px;width:6px;height:6px}
.pick-cue{position:absolute;right:14px;bottom:12px;font:10px var(--serif);letter-spacing:1px;background:#f5e7cfe8;padding:6px 9px;border:1px solid #b4935b60;color:#486259;z-index:4}
.pick:hover,.pick[aria-pressed=true]{color:#234956;background:#efe0bf;border-color:#285b59}
.pick[aria-pressed=true]{box-shadow:0 0 0 2px #285b59}
.pick[aria-pressed=true] .pick-number{color:#285b59}.pick[aria-pressed=true] .pick-cue{font-size:0;background:#285b59;color:#f4e8ca;border-color:#285b59}
.pick[aria-pressed=true] .pick-cue:after{content:'已选此色 ✓';font-size:10px}
.floral-divider{display:block;width:100%;height:75px;object-fit:contain;margin:13px auto 0}
.details{margin-top:5px;display:flex;flex-direction:column-reverse;background:#143b48;border:1px solid #ad8e57}
.detail-art{min-height:270px;background:#143b48 url('./assets/art-v1/texture-lapis.png') center/cover}
.detail-art:before{display:none}.detail-art>img:not(.detail-pattern){height:260px;width:90%;z-index:1}
.detail-art .detail-pattern{position:absolute;inset:0;margin:auto;width:95%;height:260px;opacity:.55;object-fit:contain}
.details-copy{padding:23px 24px 28px}.details-copy h3{font-size:25px}.details-copy p{font-size:12px;line-height:2}
.ritual{padding:30px 24px 50px;min-height:640px;background:#173c46;}
.ritual:before{opacity:.12}.ritual-inner{margin:auto}
.story-painting{margin:0 -24px 32px;position:relative;padding:0 20px 20px;border-bottom:1px solid #be9c584d}
.story-painting img{display:block;width:100%;height:270px;object-fit:contain}.story-painting figcaption{text-align:center;color:#dabf87;font:11px var(--serif);letter-spacing:4px;margin-top:5px}
.ritual h2{font-size:29px;line-height:1.6;max-width:100%}.ritual p{font-size:12px;max-width:100%;margin:16px 0 25px}
.ritual-card{padding:15px;background:#0a293a66}.ritual-card img{width:75px;height:75px}
.footer{padding-bottom:calc(100px + env(safe-area-inset-bottom));line-height:1.8}
.bottom-nav{padding-top:7px}.bottom-nav a{gap:2px}.bottom-nav a>span{height:28px;width:32px;display:grid;place-items:center}.bottom-nav img{height:28px;width:30px;object-fit:contain;filter:saturate(.5);opacity:.65}.bottom-nav .active img{filter:none;opacity:1}.bottom-nav a.active:before{top:-8px}
/* The bespoke preview becomes a miniature mural with a live bead composition. */
body.is-custom .page{background:#f0e4cc url('./assets/art-v1/texture-sandstone.png') center top/100% auto repeat-y}
.custom-page{padding-top:0}.custom-heading{margin:0 -24px;padding:88px 22px 25px;background:#f1e3c6 url('./assets/art-v1/hero-ribbons.png') center top/100% auto no-repeat}
.custom-heading h1{font-size:27px;margin-top:13px;letter-spacing:2px}.custom-heading>small{font-size:8px;background:#f6ecd7b3;padding:4px 6px}.custom-heading p{font-size:11px}.custom-rule{margin-top:13px}
#custom-preview{margin:0 -24px 10px;background:#103645;border-block:1px solid #ac8b51}
.custom-preview{height:345px;width:100%;max-width:100%;margin:0 auto;background:#153d48;isolation:isolate;overflow:hidden}
.custom-preview:before{content:'';position:absolute;inset:0;background:url('./assets/art-v1/hero-background.png') center 65%/cover;z-index:-2;opacity:.94}
.custom-preview[data-theme="1"]:before{background-image:url('./assets/art-v1/hero-ribbons.png')}
.custom-preview[data-theme="2"]:before{background-image:url('./assets/art-v1/hero-moon-dunes.png')}
.custom-preview:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#e8d6b580,transparent 70%);z-index:-1}
.custom-preview .preview-illustration{position:absolute;top:0;right:-10px;width:170px;height:145px;object-fit:contain;transform:none;left:auto;opacity:.85;filter:none}
.custom-preview .preview-caption{position:absolute;top:25px;left:21px;writing-mode:vertical-rl;font:15px var(--serif);letter-spacing:4px;line-height:2;color:#365650}
.custom-preview .custom-orbit{top:94px;border-color:#90733d66}.custom-preview .custom-bead{top:181px;box-shadow:2px 4px 5px #21434830,inset -3px -4px 5px #0a1b2e50}
.custom-preview .custom-preview-center{top:169px}.custom-preview>img:not(.preview-illustration){top:248px;width:76px;height:76px}
.custom-preview-center small{color:#695f44}.custom-note{font-size:10px;color:#596b60}.custom-page fieldset{margin-top:25px}
.custom-options [data-series]{background:#fcf7e7 url('./assets/art-v1/hero-background.png') center/cover;overflow:hidden;min-height:145px;justify-content:flex-end;padding-bottom:13px}
.custom-options [data-series="1"]{background-image:url('./assets/art-v1/hero-ribbons.png')}.custom-options [data-series="2"]{background-image:url('./assets/art-v1/hero-moon-dunes.png')}
.custom-options [data-series] img{height:78px;filter:drop-shadow(0 3px 3px #6c4c2044)}
.custom-options [data-series] span,.custom-options [data-series] small{background:#f7ecd6c9;padding:2px 3px}
.custom-options [data-series][aria-pressed=true]{border-color:#32645c;box-shadow:inset 0 0 0 2px #32645c}
.custom-options [data-stone]{background:#f9f2e2b8}
.custom-dialog #saved-preview{margin:16px -24px}.custom-dialog .custom-preview{height:345px}
.custom-dialog{background:#f1e5ce url('./assets/art-v1/texture-sandstone.png') center/cover}
@media(max-width:360px){.hero{min-height:660px}.hero h1{font-size:43px}.hero-copy{padding-top:90px}.product-stage{min-height:280px}.hero .product-image{height:265px}.collection{padding-inline:16px}.collection-frontispiece{margin-inline:-16px}.collection-head h2{font-size:25px}.pick{height:215px}.pick-art .pick-bracelet{height:185px}.pick-art .pick-motif{width:120px;height:110px}.custom-heading{margin-inline:-18px}.custom-heading h1{font-size:24px}#custom-preview{margin-inline:-18px}.custom-preview .preview-illustration{width:135px;height:125px}}
@media(min-width:680px){body{padding-block:20px}.hero-copy{padding-top:110px}.hero h1{font-size:52px}.hero .product-image{height:315px}.hero{min-height:760px}.product-stage{min-height:330px}.hero-bottom{padding-bottom:35px}.nav{padding-inline:24px}}
/* Art v2: generated campaign and material photography. */
.hero{background:#123545;min-height:650px;height:max(650px,calc(100svh - 140px));padding:0 24px 26px;position:relative;isolation:isolate}
.hero-campaign{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(transparent 10%,#051d2b22 32%,transparent 70%,#0a273b88);z-index:-1;pointer-events:none}
.hero .hero-copy{padding-top:clamp(100px,32vw,145px);text-align:center}
.hero .hero-copy .eyebrow{color:#e4c991;font-size:8px}.hero h1{color:#f3dfad;text-shadow:0 2px 16px #071f30;font-size:48px;font-weight:500}.hero .hero-copy p{color:#eadbc1;font-size:11px;text-shadow:0 1px 5px #071f30}
.hero .product-stage{display:none}.hero .hero-bottom{margin-top:auto;padding:0;gap:11px}.hero-bottom .story-line{background:none;color:#f5e7c8;text-shadow:0 1px 4px #132d30}
.hero-bottom .enter{background:#173e48ef;color:#f0d9a6;border-color:#b9995d}
.custom-heading{background:#eadac1 url('./assets/art-v2/atelier-dunhuang-v2.png') center/cover;padding:29px 22px 25px;text-align:left;min-height:245px;position:relative}
.custom-heading>small{display:block;max-width:155px;background:none;line-height:1.8;padding:0;color:#6d6c50;font-size:8px;letter-spacing:1.2px}.custom-heading h1{max-width:155px;font-size:29px;line-height:1.6;letter-spacing:2px;margin:16px 0 10px}.custom-heading p{max-width:135px;font-size:11px;line-height:1.9;color:#4e6158}.custom-heading .custom-rule{justify-content:flex-start;max-width:120px}
.stone-sample{width:62px;height:62px;margin:0;border-radius:0;background-image:url('./assets/art-v2/gemstones-grid-v2.png');background-size:300% 200%;background-position:var(--swatch-x) var(--swatch-y);box-shadow:none;mix-blend-mode:multiply}
.custom-preview .custom-bead.image-bead{background-image:url('./assets/art-v2/gemstones-grid-v2.png');background-size:439% 293%;background-position:var(--gem-x) var(--gem-y);border:0;box-shadow:2px 4px 5px #47391b44,inset 0 0 2px #a99369}
.wear-story{margin:35px 0 0;position:relative;height:450px;overflow:hidden;border:1px solid #b6975b}
.wear-story>img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.wear-story:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 40%,#082e3dc9)}
.wear-story figcaption{position:absolute;bottom:26px;left:24px;z-index:1;color:#f3dfb8}.wear-story small{font:8px Georgia,serif;letter-spacing:2px}.wear-story h3{font:28px/1.6 var(--serif);letter-spacing:4px;margin:10px 0 9px}.wear-story a{font:11px var(--serif);padding:8px 0;border-bottom:1px solid #d6b46a}
.gift-story{margin:30px -24px;position:relative;background:#f0dfc3}.gift-story img{display:block;width:100%;height:auto}.gift-story figcaption{padding:20px 24px;color:#234c50}.gift-story span{font:21px var(--serif);letter-spacing:2px}.gift-story small{display:block;font:11px var(--serif);letter-spacing:2px;margin-top:10px;color:#627064}
@media(min-width:680px){.hero{height:740px;min-height:740px}.hero .hero-copy{padding-top:145px}}
@media(max-width:360px){.hero h1{font-size:42px}.custom-heading h1{font-size:27px}}
.custom-heading h1:focus{outline:none}
.custom-page form{position:relative}
.custom-page form:before{content:'';position:absolute;inset:-10px -24px;background:#f2e6ce88;z-index:-1;pointer-events:none}
.custom-page form{isolation:isolate}
/* Each navigation item owns one isolated view. */
.page-heading:focus{outline:none}
body[data-page] .page>section[hidden]{display:none!important}
body[data-page] .page{min-height:100svh}