@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500&family=DM+Sans:wght@400;500&display=swap');
:root{--paper:#faf9f5;--ink:#354136;--line:#d9ddd2;--muted:#687164;--ruby:#8d302e;--pearl:#8b777f;--onyx:#58422c;color-scheme:light;font-family:'DM Sans','Microsoft JhengHei',sans-serif;color:var(--ink);background:var(--paper);scroll-behavior:smooth;scroll-padding-top:90px}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #965237;outline-offset:5px}button{background:none;border:0}p{line-height:1.85}h1,h2,h3{font-weight:400}h2{font-family:'Noto Serif TC',serif;line-height:1.45;font-size:clamp(2rem,4vw,3.8rem);margin:18px 0}h3{font-size:1.4rem}img{max-width:100%}[hidden]{display:none!important}.skip{position:fixed;top:-80px;left:12px;background:white;padding:12px;z-index:100}.skip:focus{top:10px}.site-header{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:20px 4vw;background:#faf9f5ed;backdrop-filter:blur(12px)}.brand{font-family:Georgia,serif;font-size:32px;letter-spacing:-1.5px;display:flex;align-items:baseline;gap:14px}.brand span{font:12px 'Microsoft JhengHei',sans-serif;letter-spacing:3px}.site-header nav{display:flex;align-items:center;gap:28px;font-size:14px}.contact-link{border-bottom:1px solid var(--ink);padding-bottom:7px}.contact-link span{margin-left:20px}.menu-button{display:none}.eyebrow{font-size:12px;letter-spacing:2px}.hero{height:max(760px,100svh);max-height:1100px;position:relative;overflow:hidden;padding:120px 4vw 40px}.hero-kicker{font-size:12px;letter-spacing:2px;display:flex;justify-content:space-between}.hero-word{position:absolute;top:19%;left:4%;font-family:'Noto Serif TC',serif;font-size:clamp(65px,12vw,180px);letter-spacing:-.06em;color:#e2e3da;white-space:nowrap}.hero-bottles{position:absolute;left:29%;right:5%;top:21%;bottom:8%}.hero-bottles img{position:absolute;object-fit:contain;height:83%;width:35%;filter:drop-shadow(12px 22px 15px #564b2522)}.hero-ruby{left:0;top:14%;transform:rotate(-15deg)}.hero-pearl{left:32%;top:0;z-index:2;transform:rotate(2deg)}.hero-onyx{left:63%;top:13%;transform:rotate(13deg)}.hero-copy{position:absolute;left:4%;top:49%;width:31%;z-index:3}.hero-copy h1{font-family:'Noto Serif TC',serif;font-size:clamp(22px,2.25vw,34px);line-height:1.65}.hero-copy>p:last-child{font-size:14px;color:var(--muted)}.explore-link{position:absolute;bottom:44px;left:4%;font-size:14px;border-bottom:1px solid var(--ink);padding-bottom:12px}.explore-link span{margin-left:60px}.hero-index{position:absolute;right:4%;bottom:35px;font-size:12px;line-height:1.9;text-align:right}.intro-band{padding:95px 10vw;display:grid;grid-template-columns:1fr 1fr;gap:10%;border-block:1px solid var(--line)}.intro-band>p{font-family:'Noto Serif TC',serif;font-size:clamp(21px,2.3vw,34px);margin:0}.intro-band>div p{font-size:16px;max-width:470px}.exhibit{position:relative;height:220svh;min-height:1450px;--tone:var(--ruby)}.exhibit.pearl{--tone:var(--pearl);background:#f3f2ef}.exhibit.onyx{--tone:var(--onyx);background:#f5f2e9}.exhibit-stage{position:sticky;top:75px;height:calc(100svh - 75px);min-height:650px;max-height:1050px;overflow:hidden;isolation:isolate}.section-number{position:absolute;left:4%;top:24px;font-size:12px;letter-spacing:2px}.exhibit-copy{position:absolute;left:4%;top:28%;width:28%;z-index:4}.exhibit-copy h2{font-size:clamp(27px,3.1vw,46px);line-height:1.5}.exhibit-copy p{font-size:16px;max-width:320px}.bottle-visual{position:absolute;left:37%;top:11%;width:25%;height:73%;z-index:3;transform-origin:center 70%;will-change:transform}.bottle-visual img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(15px 22px 16px #60533828)}.exhibit-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;background:var(--paper)}.hotspot-item{position:absolute;width:125px;height:132px;z-index:5;will-change:transform}.hotspot-item.pos0{left:24%;top:9%}.hotspot-item.pos1{right:9%;top:9%}.hotspot-item.pos2{right:3%;top:39%}.hotspot-item.pos3{left:8%;bottom:12%}.hotspot-item.pos4{right:29%;top:59%}.ingredient-image{position:absolute;inset:26px 18px 19px 0;width:90px;height:78px;object-fit:contain;mix-blend-mode:multiply;filter:drop-shadow(3px 6px 5px #4a403212)}.ingredient-name{position:absolute;left:0;bottom:0;font-size:14px;white-space:nowrap}.ingredient-symbol{position:absolute;left:3px;top:44px;font-family:'Noto Serif TC',serif;font-size:25px;color:var(--tone)}.hotspot{position:absolute;right:0;top:0;border:1px solid #b5b9ab;background:#faf9f5df;width:40px;height:40px;border-radius:50%;font-size:24px;line-height:1;transition:background .2s,color .2s;z-index:2}.hotspot:before{content:'';position:absolute;inset:-5px}.hotspot:hover,.hotspot[aria-expanded=true]{background:var(--ink);color:var(--paper)}.product-facts{position:absolute;right:4%;bottom:8%;width:29%;z-index:4;font-size:14px}.product-facts div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}.product-facts span:last-child{color:var(--muted)}.product-facts a{display:block;margin-top:18px;font-size:14px}.exhibit-bottom{position:absolute;bottom:24px;left:4%;right:4%;display:flex;justify-content:space-between;gap:20px;font-size:12px;z-index:5}.exhibit-bottom button{text-decoration:underline;text-underline-offset:4px}.exhibit-bottom .read-state{color:var(--muted)}.section-pad{padding:110px 7vw}.craft{display:grid;grid-template-columns:1fr 1fr;gap:9%;border-top:1px solid var(--line)}.craft-content>p{margin-top:35px}details{border-bottom:1px solid var(--line)}summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:15px;padding:24px 0;line-height:1.5;font-size:16px}summary::-webkit-details-marker{display:none}summary b{font-weight:400;margin-left:auto}details[open] summary b{transform:rotate(45deg)}details p{color:var(--muted);font-size:16px;padding:0 0 20px}.craft summary span{font-size:12px;color:var(--muted)}.text-link{display:inline-block;margin-top:35px;border-bottom:1px solid var(--ink);padding-bottom:8px}.collaborate{background:#354136;color:#f6f5ec}.collab-title{display:flex;justify-content:space-between;align-items:center;gap:40px}.collab-title p{color:#d0d8ca}.formats{display:flex;flex-wrap:wrap;gap:10px 35px;border-block:1px solid #6c7766;padding:22px 0;margin:40px 0;font-size:14px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin:65px 0 90px}.steps small{font-size:12px;letter-spacing:1px;color:#c2cbbd}.steps p{font-size:14px;color:#d0d8ca}.contact-area{display:grid;grid-template-columns:1fr 1.3fr;gap:8%;border-top:1px solid #6c7766;padding-top:60px}.contact-area h3{font-family:'Noto Serif TC',serif;font-size:29px}.small{font-size:13px;color:inherit}form{display:grid;grid-template-columns:1fr 1fr;gap:25px}form label{font-size:14px;display:flex;flex-direction:column;gap:10px}.full{grid-column:1/-1}input,textarea,select{width:100%;background:transparent;border:0;border-bottom:1px solid #929b89;color:inherit;padding:12px 0;border-radius:0;font-size:16px}input::placeholder,textarea::placeholder{color:#bac2b2}select option{background:#354136}textarea{resize:vertical}.send-button{grid-column:1/-1;background:#f6f5ec;color:#354136;padding:17px 22px;display:flex;justify-content:space-between}.form-status:empty{display:none}.form-status{font-size:14px}.faq{display:grid;grid-template-columns:1fr 1.2fr;gap:10%}.faq h2{font-size:34px}.site-footer{padding:50px 4vw;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:30px}.site-footer>div{display:flex;gap:25px;font-size:14px;flex-wrap:wrap}.site-footer>small{font-size:12px;text-align:right}.site-footer>p{text-align:right;font-size:14px}.site-footer button{padding:0;font-size:14px}#ingredient-popover{position:fixed;z-index:70;width:310px;max-width:calc(100vw - 24px);background:#fffef9;border:1px solid #e1e3d7;box-shadow:0 12px 40px #27342222;padding:28px;max-height:calc(100svh - 24px);overflow:auto}#ingredient-popover small{font-size:12px;letter-spacing:2px;color:var(--muted)}#ingredient-popover h3{font-family:'Noto Serif TC',serif;font-size:22px;line-height:1.5;margin:16px 0 10px}#ingredient-popover p{font-size:15px;line-height:1.8}.popover-close{position:absolute;right:5px;top:3px;width:36px;height:36px;font-size:23px}.read-more{padding:12px 0;border-bottom:1px solid var(--ink);font-size:14px}dialog{background:#faf9f5;color:var(--ink);border:0;padding:60px 45px 40px;width:620px;max-width:calc(100vw - 24px);max-height:85svh;overflow:auto;box-shadow:0 10px 60px #0003}dialog::backdrop{background:#23312788;backdrop-filter:blur(4px)}dialog h2{font-size:30px}dialog p{font-size:16px}dialog a{text-decoration:underline;text-underline-offset:4px}.dialog-close{position:absolute;right:18px;top:14px;padding:12px}.dialog-body small{font-size:13px;color:var(--muted)}
@media(min-width:1500px){.hotspot-item{width:150px;height:155px}.ingredient-image{width:115px;height:100px}}
@media(max-width:800px){.site-header{padding:17px 5vw}.brand{font-size:28px}.brand span{font-size:11px;letter-spacing:2px}.site-header nav{gap:16px}.site-header nav>a:nth-child(4){display:none}.hero{min-height:830px;height:100svh}.hero-word{top:17%;font-size:14vw}.hero-bottles{left:15%;right:4%;top:27%;bottom:22%}.hero-copy{top:13%;width:80%}.hero-copy h1{font-size:23px}.hero-copy .eyebrow,.hero-copy>p:last-child{display:none}.hero-word{top:32%;opacity:.6}.hero-kicker{font-size:10px}.hero-index{font-size:11px}.intro-band{padding:65px 6vw;gap:30px}.exhibit-copy{top:9%;left:5%;width:85%}.exhibit-copy h2{font-size:26px;max-width:330px;margin:10px 0}.exhibit-copy p{font-size:14px;max-width:310px}.bottle-visual{left:33%;top:30%;width:34%;height:48%}.exhibit-stage{min-height:880px}.hotspot-item{width:92px;height:115px}.hotspot-item.pos0{left:7%;top:31%}.hotspot-item.pos1{right:5%;top:33%}.hotspot-item.pos2{right:3%;top:59%}.hotspot-item.pos3{left:5%;bottom:19%}.hotspot-item.pos4{right:5%;top:77%}.ingredient-image{width:65px;height:65px}.ingredient-symbol{font-size:22px}.ingredient-name{font-size:13px}.product-facts{left:5%;right:auto;bottom:7%;width:58%;font-size:13px}.product-facts div{padding:7px 0}.section-number{left:5%;top:22px}.section-pad{padding:70px 6vw}.steps{grid-template-columns:1fr 1fr;margin:40px 0 60px}.craft,.faq,.contact-area{grid-template-columns:1fr;gap:24px}.collab-title{display:block}.collab-title h2{font-size:36px}.exhibit{height:2100px}.site-footer .brand span{display:none}}
@media(max-width:520px){.menu-button{display:block;font-size:14px}.site-header nav{display:none;position:absolute;top:70px;left:0;right:0;background:var(--paper);padding:25px;flex-wrap:wrap;border-bottom:1px solid var(--line)}.site-header nav.open{display:flex}.site-header nav>a:nth-child(4){display:block}.hero{min-height:760px;height:95svh}.hero-bottles{left:4%;right:4%;top:33%;bottom:20%}.hero-bottles img{width:38%}.hero-ruby{left:0}.hero-pearl{left:31%}.hero-onyx{left:62%}.hero-copy{top:20%}.hero-kicker{margin-top:0}.hero-word{top:40%}.hero-index{right:5%;bottom:25px}.explore-link{left:5%;bottom:90px}.intro-band{grid-template-columns:1fr;padding:55px 6vw}.hero-copy h1{font-size:21px}.hotspot-item.pos0{left:2%}.hotspot-item.pos1{right:2%}.hotspot-item.pos3{left:1%}.bottle-visual{left:31%;width:39%}.exhibit-bottom{font-size:11px;gap:8px;left:5%;right:5%}.exhibit-copy p{max-width:285px}.contact-area form{grid-template-columns:1fr}.steps{gap:22px}.steps h3{font-size:20px}.site-footer{grid-template-columns:1fr}.site-footer>p,.site-footer>small{text-align:left}.formats{gap:15px 25px}dialog{padding:55px 25px 30px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}.exhibit{height:auto;min-height:0}.exhibit-stage{position:relative;top:auto}.bottle-visual,.hotspot-item{transform:none!important;opacity:1!important}.hero-bottles img{transition:none}}
.ingredient-image:not(.ingredient-turmeric){object-fit:cover;border-radius:48% 52% 45% 55%;mix-blend-mode:normal}.ingredient-goji{object-position:center 15%}@media(max-width:800px){.exhibit{height:auto;min-height:0}.exhibit-stage{position:relative;top:0;height:960px;min-height:960px}.hotspot-item{opacity:1!important;transform:none!important}.bottle-visual{transform:rotate(-3deg)!important}.skip-motion{display:none}}
.reveal{height:240svh;min-height:1500px;background:#f7f6f2}.reveal-stage{position:sticky;top:75px;height:calc(100svh - 75px);min-height:540px;overflow:hidden}.reveal video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.film-caption{position:absolute;top:7%;left:4%;z-index:2;pointer-events:none}.film-caption h2{font-size:clamp(25px,3.4vw,48px)}.film-toolbar{position:absolute;bottom:35px;left:4%;right:4%;display:flex;justify-content:space-between;align-items:center;gap:20px;z-index:3;font-size:14px}.film-toolbar button,.film-toolbar a{padding:12px 18px;background:#faf9f5e8;border:1px solid #d9ddd2;border-radius:30px}.film-track{position:absolute;bottom:0;left:0;right:0;height:3px;background:#d9ddd2}.film-track span{display:block;height:100%;background:#8d302e;transform:scaleX(0);transform-origin:left}.film-error{position:absolute;bottom:95px;left:4%;background:#faf9f5;padding:15px}.reveal:has(.film-error:not([hidden])){height:650px;min-height:0}@media(max-width:800px),(prefers-reduced-motion:reduce){.reveal{height:auto;min-height:0}.reveal-stage{position:relative;top:0;height:680px;min-height:0}.reveal video{top:130px;height:390px}.film-caption{top:25px}.film-caption h2{font-size:28px}.film-caption h2 br{display:none}.film-instruction,.film-track{display:none}.film-toolbar{bottom:55px;justify-content:center}}@media(max-width:520px){.reveal-stage{height:520px}.reveal video{top:100px;height:310px}.film-toolbar{bottom:45px;font-size:13px}}
/* A single pinned, full-bleed scene controlled by the visitor's scroll. */
.hero,.intro-band{display:none}
.site-header{background:transparent;backdrop-filter:none}
.immersive-ruby{height:320svh!important;min-height:0!important;background:#eeede7}
.immersive-ruby .exhibit-stage{position:sticky!important;top:0!important;height:100svh!important;min-height:0!important;max-height:none;background:#eeede7;overflow:hidden}
.scene-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:1;pointer-events:none}
.scene-loop{visibility:hidden}
.immersive-ruby[data-phase="loop"] .scene-loop{visibility:visible}
.immersive-ruby[data-phase="loop"] .scene-entry{visibility:hidden}
.scene-title{position:absolute;top:29%;left:57%;z-index:4;pointer-events:none;will-change:transform,opacity}
.scene-title>span{font-size:10px;letter-spacing:3px}
.scene-title h1{font-family:'Noto Serif TC',serif;font-size:clamp(42px,5.7vw,88px);line-height:1.3;letter-spacing:-2px;margin:24px 0}
.scene-title p{font-size:13px;letter-spacing:2px}
.immersive-ruby .section-number,.immersive-ruby .exhibit-bottom,.immersive-ruby .product-facts,.immersive-ruby .bottle-visual{display:none}
.immersive-ruby .exhibit-copy{left:61%;top:32%;width:30%;z-index:5;background:none;padding:0;opacity:0}
.immersive-ruby .exhibit-copy h2{font-size:clamp(25px,2.7vw,41px);margin:18px 0;line-height:1.6}
.immersive-ruby .exhibit-copy p{font-size:14px;max-width:360px}
.scene-product-link{display:inline-block;font-size:12px;margin-top:14px;border-bottom:1px solid #35413660;padding-bottom:6px}
.immersive-ruby .hotspots{position:absolute;inset:0;z-index:6;pointer-events:none}
.immersive-ruby .hotspot-item{position:absolute;width:106px;height:50px;opacity:0;pointer-events:auto}
.immersive-ruby .hotspot-item .ingredient-image,.immersive-ruby .hotspot-item .ingredient-symbol{display:none}
.immersive-ruby .hotspot{left:0;top:0;right:auto;width:32px;height:32px;font-size:21px;border:1px solid #7c82776b;background:#f7f6f1b8;backdrop-filter:blur(5px)}
.immersive-ruby .ingredient-name{left:0;bottom:0;font-size:11px;letter-spacing:1px;white-space:nowrap}
.immersive-ruby .hotspot-item:after{content:'';position:absolute;top:16px;left:42px;width:42px;height:1px;background:#68716450;pointer-events:none}
.immersive-ruby .pos0{left:11%;top:28%;right:auto;bottom:auto}
.immersive-ruby .pos1{left:47%;top:23%;right:auto;bottom:auto}
.immersive-ruby .pos2{left:50%;top:49%;right:auto;bottom:auto}
.immersive-ruby .pos3{left:10%;top:71%;right:auto;bottom:auto}
.immersive-ruby .pos4{left:45%;top:78%;right:auto;bottom:auto}
.scene-journey{position:absolute;left:3.4%;top:36%;bottom:31%;z-index:7;display:flex;align-items:center;flex-direction:column;gap:19px;font-size:9px;letter-spacing:2px;color:#4c5748;pointer-events:none}
.journey-index{writing-mode:vertical-rl}.journey-line{display:block;width:1px;flex:1;background:#68716430}.journey-line i{display:block;height:100%;width:1px;background:#354136;transform-origin:top}.journey-phase{writing-mode:vertical-rl}
.scene-hint{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);z-index:7;text-align:center;font-size:11px;letter-spacing:2px;white-space:nowrap;pointer-events:none}.scene-hint b{display:block;font-size:21px;font-weight:400;margin-top:9px}
.scene-explore-button,.scene-pause-button{position:absolute;right:5%;bottom:34px;z-index:8;font-size:11px;letter-spacing:1px;padding:9px 0;border-bottom:1px solid #68716460;border-radius:0;background:none}
.immersive-ruby.scene-static{height:100svh!important}
.immersive-ruby.scene-static .scene-film,.immersive-ruby.scene-static .scene-title,.immersive-ruby.scene-static .scene-journey,.immersive-ruby.scene-static .scene-hint{display:none}
.immersive-ruby.scene-static .bottle-visual{display:block;left:17%;top:17%;width:28%;height:70%}
@media(max-width:800px){
 .site-header{padding:20px 6vw}
 .immersive-ruby{height:300svh!important}
 .immersive-ruby .scene-film{inset:0;width:100%;height:100%;object-position:30% center}
 .scene-title{left:8%;right:8%;top:auto;bottom:16%}
 .scene-title>span{font-size:9px;letter-spacing:2px}
 .scene-title h1{font-size:48px;margin:16px 0}.scene-title p{font-size:11px}
 .immersive-ruby .exhibit-copy{left:8%;top:12%;width:84%}
 .immersive-ruby .exhibit-copy h2{font-size:24px;line-height:1.45;margin:12px 0}
 .immersive-ruby .exhibit-copy p:not(.eyebrow),.scene-product-link{display:none}
 .immersive-ruby .exhibit-copy .eyebrow{font-size:10px;letter-spacing:2px}
 .immersive-ruby .hotspot-item{width:94px;height:48px}
 .immersive-ruby .ingredient-name{font-size:10px}
 .immersive-ruby .hotspot-item:after{width:22px}
 .immersive-ruby .pos0{left:8%;top:28%}
 .immersive-ruby .pos1{left:auto;right:6%;top:29%}
 .immersive-ruby .pos2{left:auto;right:4%;top:52%}
 .immersive-ruby .pos3{left:7%;top:72%}
 .immersive-ruby .pos4{left:auto;right:8%;top:76%}
 .scene-journey{left:3%;top:36%;bottom:30%}.journey-index{display:none}
 .scene-hint{left:7%;bottom:27px;transform:none;text-align:left;font-size:10px;letter-spacing:1px}.scene-hint b{display:inline;margin-left:12px}
 .scene-explore-button,.scene-pause-button{right:7%;bottom:25px;font-size:10px}
 .immersive-ruby.scene-static .bottle-visual{left:27%;top:27%;width:46%;height:51%}
}
@media(max-width:520px){
 .immersive-ruby .scene-film{top:24%;height:64%;object-position:26% center;mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent)}
 .scene-title{top:13%;bottom:auto}.scene-title h1{font-size:42px}
 .immersive-ruby .exhibit-copy h2 br{display:none}
}
@media(prefers-reduced-motion:reduce){.immersive-ruby{height:100svh!important}.immersive-ruby .exhibit-stage{position:relative!important}.immersive-ruby .hotspot-item{transform:none!important}}

/* One shared viewport, with a leftward camera pull and an upward clockwise flip. */
#trilogy{height:766svh;position:relative;background:#eeede7}
.trilogy-viewport{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;perspective:1100px;background:#eeede7}
#trilogy .trilogy-panel{position:absolute;inset:0;height:100%!important;min-height:0!important;will-change:transform;transform-origin:center;backface-visibility:hidden}
#trilogy .trilogy-panel .exhibit-stage{position:relative!important;top:0!important;height:100%!important;min-height:0!important}
#ruby{z-index:1}#pearl{z-index:2}#onyx{z-index:3}
.scene-title h2{font-family:'Noto Serif TC',serif;font-size:clamp(42px,5.7vw,88px);line-height:1.3;letter-spacing:-2px;margin:24px 0}
#pearl .exhibit-stage{background:#f0efeb}#onyx .exhibit-stage{background:#f1eee8}
#trilogy .trilogy-panel[data-continuous="true"] .scene-entry{visibility:inherit}
@media(max-width:800px){#trilogy{height:706svh}.scene-title h2{font-size:48px;margin:16px 0}}
@media(max-width:520px){.scene-title h2{font-size:42px}}
@media(prefers-reduced-motion:reduce){
 #trilogy{height:auto}.trilogy-viewport{position:relative;height:auto;overflow:visible;perspective:none}
 #trilogy .trilogy-panel{position:relative;height:100svh!important;transform:none!important;opacity:1!important;visibility:visible!important}
}
/* Original product photographs keep every label intact in the opening. */
.trio-opening{position:absolute;inset:0;z-index:10;overflow:hidden;background:#eeede7;--push:0;--copy-opacity:1}
.trio-intro{position:absolute;top:14%;left:0;right:0;text-align:center;z-index:12;opacity:var(--copy-opacity);pointer-events:none}
.trio-intro>span{font-size:9px;letter-spacing:4px}.trio-intro h1{font-family:'Noto Serif TC',serif;font-size:clamp(23px,2.3vw,36px);letter-spacing:3px;margin:15px 0;font-weight:400}
.trio-cast{position:absolute;inset:0;isolation:isolate}
.opening-active .site-header{background:linear-gradient(#eeede7f5,#eeede7cc 70%,#eeede700);padding-bottom:30px}
.trio-bottle{position:absolute;height:132%;width:1px;top:-23%;transform-origin:50% 65%;will-change:transform}
.trio-bottle img{position:absolute;height:100%;width:auto;max-width:none;left:0;transform:translateX(-50%);filter:drop-shadow(10px 25px 20px #443b271c);animation:trio-nudge 6s ease-in-out infinite;will-change:transform;user-select:none}
.trio-pearl{left:19%;z-index:2;transform:translateX(calc(var(--push)*-60vw)) scale(calc(1 - var(--push)*.12))}
.trio-onyx{left:81%;top:-25%;z-index:3;transform:translateX(calc(var(--push)*60vw)) scale(calc(1 - var(--push)*.12))}
.trio-ruby{left:50%;top:-12%;z-index:4;transform:translateY(calc(var(--push)*-6vh)) scale(calc(1 + var(--push)*1.75))}
.trio-pearl img{animation-delay:-2s}.trio-onyx img{animation-delay:-4s}
@keyframes trio-nudge{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}18%{transform:translateX(-48%) translateY(-2%) scale(1.07)}33%{transform:translateX(-51%) translateY(1%) scale(1.025)}52%{transform:translateX(-50%) translateY(0) scale(1)}76%{transform:translateX(-51%) translateY(-1%) scale(1.015)}}
.trio-footer{position:absolute;left:5%;right:5%;bottom:28px;z-index:12;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:11px;letter-spacing:2px;opacity:var(--copy-opacity)}
.trio-enter{padding:12px 20px;background:#eeede7d9;border-radius:24px;border:1px solid #68716440}.trio-enter b{margin-left:16px;font-weight:400;font-size:18px}.trio-pause{font-size:10px;border-bottom:1px solid #68716460;padding:9px 0;letter-spacing:1px}
.trio-still img{animation-play-state:paused}
@media(max-width:800px){.trio-bottle{height:126%;top:-16%}.trio-pearl{left:14%}.trio-onyx{left:86%;top:-18%}.trio-ruby{top:0}.trio-intro{top:13%}.trio-intro h1{font-size:25px}}
@media(max-width:520px){.trio-intro{top:10%}.trio-intro>span{font-size:8px;letter-spacing:2px}.trio-intro h1{font-size:22px;letter-spacing:1px;margin-top:12px}.trio-bottle{height:52%;top:18%}.trio-pearl{left:21%}.trio-onyx{left:79%;top:17%}.trio-ruby{height:70%;top:42%;left:50%}.trio-footer{left:7%;right:7%;bottom:20px;letter-spacing:1px}.trio-footer>span{display:none}.trio-enter{padding:8px 14px}.trio-enter b{margin-left:9px}.trio-ruby{transform:translateY(calc(var(--push)*-28vh)) scale(calc(1 + var(--push)*2.2))}}
@media(prefers-reduced-motion:reduce){.trio-opening{position:relative;height:100svh;opacity:1!important;visibility:visible!important}.trio-bottle{transform:none!important}.trio-bottle img{animation:none}.trio-pause{display:none}}
/* Foreground bottles surround a quiet, distant brand plane. */
.trio-opening{background:radial-gradient(ellipse at 50% 43%,#fbfaf6 0%,#f3f2ec 40%,#e7e6dd 100%)}
.trio-intro{inset:0;z-index:1;transform:scale(calc(1 + var(--push)*.18));transform-origin:50% 43%}
.trio-kicker{position:absolute;top:30%;left:0;right:0;font-size:9px!important;letter-spacing:4px!important;color:#7d8577}
.trio-intro .trio-wordmark{position:absolute;top:35%;left:0;right:0;margin:0;font-family:Georgia,'Times New Roman',serif;font-size:clamp(58px,7.2vw,108px);letter-spacing:-5px;line-height:1.05;font-weight:400}
.trio-wordmark span{display:block;font-family:'Microsoft JhengHei',sans-serif;font-size:12px;letter-spacing:9px;margin:17px 0 0 9px}
.trio-intro .trio-float{position:absolute;margin:0;font-family:'Noto Serif TC',serif;font-size:clamp(17px,1.7vw,25px);letter-spacing:5px;line-height:1.5;animation:trio-words 7s ease-in-out infinite;color:#68715f}
.trio-line-one{top:57%;right:51%}.trio-line-two{top:64%;left:51%;animation-delay:-3.5s!important}
.trio-question{position:absolute;top:76%;left:0;right:0;margin:0;font-size:11px;letter-spacing:3px;color:#858a7c}
.trio-cast{z-index:3;pointer-events:none}
.trio-bottle img{animation:trio-peek 8s ease-in-out infinite;filter:drop-shadow(18px 26px 22px #443b271c)}
.trio-ruby{left:11%;top:-5%;height:116%;z-index:4;transform:translate3d(calc(var(--push)*39vw),calc(var(--push)*-8vh),0) rotate(calc(17deg - var(--push)*17deg)) scale(calc(1 + var(--push)*1.8))}
.trio-pearl{left:90%;top:-31%;height:97%;z-index:2;transform:translate3d(calc(var(--push)*55vw),calc(var(--push)*-18vh),0) rotate(-28deg) scale(calc(1 - var(--push)*.1))}
.trio-onyx{left:89%;top:32%;height:92%;z-index:3;transform:translate3d(calc(var(--push)*65vw),calc(var(--push)*22vh),0) rotate(24deg) scale(calc(1 - var(--push)*.1))}
.trio-pearl img{animation-delay:-2.7s}.trio-onyx img{animation-delay:-5.4s}
@keyframes trio-peek{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}22%{transform:translateX(-48%) translateY(-1.2%) scale(1.025)}45%{transform:translateX(-50%) translateY(.5%) scale(1)}74%{transform:translateX(-51%) translateY(-.5%) scale(1.012)}}
@keyframes trio-words{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.trio-still img,.trio-still .trio-float{animation-play-state:paused}
.trio-footer{color:#69715f}.trio-footer>span{font-size:9px;letter-spacing:2px}.trio-enter{background:#faf9f580;border-color:#68716433}.trio-pause{background:#eeede7c9;padding:9px 8px;border-radius:3px}
@media(max-width:800px){.trio-ruby{left:-5%;height:101%;top:8%}.trio-pearl{left:106%;height:82%;top:-14%}.trio-onyx{left:108%;height:80%;top:50%}.trio-intro .trio-wordmark{font-size:78px}.trio-kicker{top:32%}.trio-line-one{top:56%;right:45%}.trio-line-two{top:63%;left:50%}}
@media(max-width:520px){.trio-ruby{left:-11%;height:64%;top:32%;transform:translate3d(calc(var(--push)*60vw),calc(var(--push)*-14vh),0) rotate(calc(17deg - var(--push)*17deg)) scale(calc(1 + var(--push)*2.2))}.trio-pearl{left:93%;height:53%;top:-14%}.trio-onyx{left:79%;height:58%;top:47%;transform:translate3d(calc(var(--push)*65vw),calc(var(--push)*22vh),0) rotate(31deg) scale(calc(1 - var(--push)*.1))}.trio-kicker{top:34%;font-size:7px!important;letter-spacing:2px!important}.trio-intro .trio-wordmark{top:39%;font-size:42px;letter-spacing:-2px}.trio-wordmark span{font-size:9px;letter-spacing:5px;margin-top:12px}.trio-intro .trio-float{font-size:15px;letter-spacing:2px}.trio-line-one{top:56%;right:39%}.trio-line-two{top:62%;left:55%}.trio-question{top:24%;left:12%;right:18%;font-size:9px;letter-spacing:1px}.trio-footer{bottom:22px}.trio-footer>span{display:none}}
@media(prefers-reduced-motion:reduce){.trio-intro{transform:none}.trio-intro .trio-float,.trio-bottle img{animation:none}.trio-ruby{transform:rotate(17deg)!important}.trio-pearl{transform:rotate(-28deg)!important}.trio-onyx{transform:rotate(24deg)!important}}
.contact-direct{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:18px}
.contact-email-button{display:flex;justify-content:space-between;align-items:center;gap:48px;width:100%;max-width:440px;padding:19px 24px;background:#f6f5ec;color:#354136;transition:background .2s}
.contact-email-button:hover{background:#e8eadf}
.contact-address{font-size:14px;text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}

/* Locally hosted Traditional Chinese rounded type; editorial headings stay serif. */
@font-face{font-family:'GenSen Rounded TW';src:url('assets/fonts/gensen-tw-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'GenSen Rounded TW';src:url('assets/fonts/gensen-tw-500.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
:root{font-family:'DM Sans','GenSen Rounded TW','Microsoft JhengHei',sans-serif}
.brand span,.trio-wordmark span{font-family:'GenSen Rounded TW','Microsoft JhengHei',sans-serif}
#trilogy .ingredient-name{font-size:12px;letter-spacing:.5px}
@media(max-width:800px){#trilogy .ingredient-name{font-size:11px;letter-spacing:.25px}}