@font-face{font-family:Atelier;src:url("fonts/garamond.woff") format("woff");font-display:swap}
@font-face{font-family:Atelier;src:url("fonts/garamond-italic.woff") format("woff");font-style:italic;font-display:swap}
@font-face{font-family:Inter;src:url("fonts/inter.woff") format("woff");font-display:swap}
:root{--paper:#faf8f3;--ink:#27241e;--soft:#625950;--line:#d3cdc2;--serif:Atelier,Georgia,serif;--sans:Inter,"PingFang SC","Microsoft YaHei",sans-serif;--pad:clamp(28px,5.65vw,115px);--original:#baa17c;--lemon:#d1b938;--plum:#60314a;--quince:#aa7340;--forest:#486b48;scroll-behavior:smooth;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button,select{font:inherit;color:inherit}button,select,a{touch-action:manipulation}
a{color:inherit;text-decoration:none}button{background:none;border:0;cursor:pointer}p,h1,h2,h3,figure{margin:0}
img{display:block;max-width:100%}em{font-weight:400}button:focus-visible,a:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #aa5236;outline-offset:4px}
.skip{position:fixed;left:1rem;top:-8rem;padding:1rem;background:white;z-index:100}.skip:not(:focus){clip-path:inset(50%);width:1px;height:1px;overflow:hidden;padding:0}.skip:focus{top:1rem}
.masthead{height:84px;background:#fcfaf6;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--pad);position:relative;z-index:5;border-bottom:1px solid #443a2d1a}
.brand,.tools,.masthead nav,.lang-switch,.cta,.cycle,.chapter,.hero-index{display:flex;align-items:center}
.brand{justify-self:start;gap:16px}.sigil{height:41px;width:auto}.wordmark{width:150px;height:auto}
.masthead nav{gap:clamp(22px,3.25vw,54px)}.masthead nav a{font-size:13px;padding:15px 0;position:relative}
.masthead nav a:after,.top:after{content:"";position:absolute;bottom:8px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.masthead nav a:hover:after,.masthead nav a:focus-visible:after,.top:hover:after{transform:scaleX(1)}
.tools{justify-self:end;gap:18px}.lang-switch{gap:8px;position:relative;padding-left:8px}.lang-switch svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.25}
.lang-switch select{cursor:pointer;appearance:none;border:0;background:none;font-size:12px;letter-spacing:.04em;padding:13px 16px 13px 1px;min-width:41px}.lang-switch i{pointer-events:none;position:absolute;right:3px;width:5px;height:5px;border:solid currentColor;border-width:0 1px 1px 0;transform:rotate(45deg);margin-top:-3px}
#menu-button{display:none}
.hero{position:relative;isolation:isolate;height:43.75vw;background:#e7e0d6;display:flex;align-items:center;overflow:hidden}
.hero-art,.hero-art img{position:absolute;inset:0;width:100%;height:100%;z-index:-1}.hero-art img{object-fit:contain}
.hero-copy{margin-left:var(--pad);width:35%;max-width:625px;padding-bottom:12px;animation:enter .75s ease-out both}
.eyebrow{font-family:var(--sans);font-size:10px;line-height:1.6;letter-spacing:.18em;text-transform:uppercase;font-weight:400}
.ruled{display:flex;align-items:center;gap:13px}.ruled:before{content:"";width:32px;height:1px;background:currentColor}
h1,h2,h3{font-family:var(--serif);font-weight:400}h1 span,h1 em{display:block}
h1{font-size:clamp(76px,7.4vw,153px);line-height:.89;letter-spacing:-.053em;margin:clamp(19px,2.15vw,42px) 0 clamp(19px,1.7vw,34px)}
h1 em{color:#66513b;line-height:.99;letter-spacing:-.05em}
.intro{font-size:clamp(14px,1.05vw,18px);line-height:1.65;color:#4f4942}
.intro{max-width:34ch}
.cta{margin-top:clamp(19px,2.3vw,40px);display:inline-flex;background:#302e25;color:#fffaf2;min-height:48px;gap:28px;padding:0 23px;font-size:12px;letter-spacing:.012em;transition:background .25s}
.cta:hover{background:#554a38}.arrow{position:relative;display:inline-block;width:22px;height:1px;background:currentColor;flex:none}.arrow:after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border:solid currentColor;border-width:1px 1px 0 0;transform:rotate(45deg)}.arrow.left{transform:rotate(180deg)}
.cta .arrow{transition:transform .25s}.cta:hover .arrow{transform:translateX(4px)}
.hero-index{position:absolute;left:42%;right:3.5%;bottom:5.8%;justify-content:center;gap:13px;font-family:var(--serif);color:#554c43;font-size:16px;font-style:italic}
.hero-index a{display:inline-flex;align-items:center;min-height:32px;text-underline-offset:4px}.hero-index a:hover,.hero-index a:focus-visible{text-decoration:underline}.hero-index{bottom:3.1%;gap:9px}
.section{scroll-margin-top:20px}
.collection{padding:clamp(54px,5.6vw,102px) var(--pad) clamp(68px,8vw,145px)}
.collection-head{display:flex;align-items:end;justify-content:space-between}
.chapter{gap:11px;color:#62574b}.chapter>span:first-child{font-family:var(--serif);font-size:15px;letter-spacing:0}.chapter b{height:1px;width:30px;background:currentColor;opacity:.66}
h2{font-size:clamp(48px,4.9vw,100px);letter-spacing:-.047em;line-height:1.02}.collection-head h2{margin-top:9px}
.palette{display:flex;width:88px;height:6px;margin-bottom:10px}.palette i{flex:1}.palette i:nth-child(1){background:var(--original)}.palette i:nth-child(2){background:var(--lemon)}.palette i:nth-child(3){background:var(--plum)}.palette i:nth-child(4){background:var(--quince)}.palette i:nth-child(5){background:var(--forest)}
.tabs{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);margin:clamp(25px,2.5vw,46px) 0 0}
.tabs button{font:normal clamp(18px,1.8vw,34px)/1.12 var(--serif);min-height:67px;border-bottom:1px solid var(--line);padding:14px 5px;display:flex;align-items:center;justify-content:center;gap:10px;position:relative;transition:background .2s}
.tabs button:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--swatch)}.tabs button[aria-selected=true]{background:#eee9df}.tabs button[aria-selected=true]:after{content:"";position:absolute;inset:auto 0 -1px;background:var(--ink);height:2px}.tabs button:hover{background:#eee9df}
.variant-stage{--tint:#e9decb;display:grid;grid-template-columns:48% 52%;position:relative;margin-top:clamp(20px,1.8vw,32px);background:var(--tint);transition:background .45s}
.variant-photo{position:relative;min-width:0;overflow:hidden;aspect-ratio:.99}.variant-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 53%;transition:opacity .25s}
.photo-mark{position:absolute;bottom:20px;left:22px;color:white;writing-mode:vertical-rl;transform:rotate(180deg);font-size:9px;letter-spacing:.24em;text-shadow:0 1px 4px #211c16}
.variant-copy{padding:clamp(24px,4.8vw,89px);align-self:center;min-width:0}.variant-top,.variant-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px}
.counter{font:italic 17px var(--serif);color:#615545;white-space:nowrap}#current-num{color:var(--ink)}
.variant-copy h3{font-size:clamp(60px,6.8vw,128px);line-height:.95;letter-spacing:-.048em;margin:30px 0 17px}.taste{font-size:clamp(15px,1.18vw,20px);line-height:1.55;max-width:37ch}.specs{display:flex;gap:clamp(26px,4vw,75px);margin:clamp(20px,2.8vw,47px) 0;padding:19px 0;border-top:1px solid #44362247;border-bottom:1px solid #44362247}.specs small,.suggestion>span:first-child{font:normal 9px/1.6 var(--sans);letter-spacing:.15em;text-transform:uppercase;display:block}.specs strong{font:normal clamp(25px,2.2vw,42px)/1.1 var(--serif);display:block}.specs em{font-size:.74em}.suggestion{font-size:13px;line-height:1.55;max-width:30ch}.suggestion>span:first-child{margin-bottom:4px}.cycle{gap:7px}.cycle button{width:40px;height:40px;border-radius:50%;border:1px solid #817565;display:grid;place-items:center}.cycle button:hover{background:#ffffff52}.cycle .arrow{width:15px}

footer{border-top:1px solid #67515c;background:#39252f;color:#fcf4ea;display:flex;align-items:center;justify-content:space-between;padding:40px var(--pad);gap:25px;font-size:11px}.footer-brand img{width:135px;filter:brightness(0) invert(92%)}.top{font-size:12px;padding:15px 0;position:relative}
:lang(zh-Hans){--serif:Atelier,"Songti SC","Noto Serif CJK SC","SimSun",serif}.hero-copy:lang(zh-Hans) h1{line-height:1.12;font-size:clamp(68px,6.1vw,130px);letter-spacing:0}.hero-copy:lang(zh-Hans) h1 em{font-style:normal}h2:lang(zh-Hans){line-height:1.2;letter-spacing:0}.eyebrow:lang(zh-Hans){letter-spacing:.13em}
@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(min-width:1921px){.hero{height:43.75vw}.hero-copy{max-width:38vw}}
@media(min-width:721px) and (max-width:1000px){.hero{height:57.22vw}.hero-copy{width:38%}h1{font-size:clamp(60px,7.7vw,77px)}.variant-copy{padding:25px}.variant-copy h3{font-size:64px;margin:18px 0 12px}.specs{margin:15px 0;padding:11px 0}.variant-photo{aspect-ratio:auto;min-height:380px}.variant-photo img{position:absolute;inset:0}.masthead{height:75px}.wordmark{width:125px}.sigil{height:35px}.masthead nav{gap:19px}}
@media(max-width:720px){
:root{--pad:clamp(20px,6vw,40px)}.masthead{height:64px;display:flex;justify-content:space-between}.brand{gap:10px}.sigil{height:31px}.wordmark{width:117px}.tools{gap:11px}
#menu-button{display:flex;flex-direction:column;justify-content:center;gap:5px;width:38px;height:42px;padding:8px}#menu-button span{height:1px;width:22px;background:currentColor;transition:transform .2s}#menu-button[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}#menu-button[aria-expanded=true] span:last-child{transform:translateY(-3px) rotate(-45deg)}
.masthead nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fcfaf6;padding:10px var(--pad) 20px;box-shadow:0 7px 9px #2e261215;align-items:stretch;gap:0}.masthead nav.open{display:flex;flex-direction:column}.masthead nav a{padding:14px 0;border-top:1px solid var(--line);font-size:16px}
.hero{height:auto;display:flex;flex-direction:column;align-items:stretch;background:linear-gradient(170deg,#f1ebe2 10%,#e7dfd6 50%,#d7cec6 95%)}.hero-copy{order:0;max-width:none;width:auto;margin:0;padding:31px var(--pad) 12px}.eyebrow{font-size:9px}.ruled:before{width:25px}.ruled{gap:10px}h1{font-size:clamp(66px,10.8vw,85px);margin:15px 0 12px;line-height:.88}h1 span,h1 em{display:inline}h1 span:after{content:" "}.intro{max-width:36ch;font-size:13px;line-height:1.6}.cta{font-size:12px;margin-top:17px;min-height:42px;padding:0 18px;gap:23px}.hero-art{order:1;position:relative;display:block;width:100%;height:auto;z-index:0;mask-image:linear-gradient(to bottom,transparent,#000 5%)}.hero-art img{position:static;width:100%;height:auto}.hero-index{order:2;position:static;z-index:1;padding:0 0 14px;margin-top:-14px;background:#d8cec4;font-size:13px}
.collection{padding-top:44px;padding-bottom:54px}.collection-head{align-items:center}.collection-head h2{font-size:clamp(39px,9vw,64px);margin-top:8px}.palette{height:4px;width:38px;margin:20px 0 0 8px}.chapter{gap:8px}.chapter b{width:20px}
.tabs{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px;border:0;margin:21px 0 15px}.tabs button{min-height:40px;padding:7px 12px;gap:6px;border:1px solid var(--line);font-size:18px}.tabs button[aria-selected=true]{border-color:#706452}.tabs button[aria-selected=true]:after{display:none}.tabs button:before{width:7px;height:7px}
.variant-stage{display:flex;flex-direction:column;margin:0}.variant-photo{width:100%;aspect-ratio:.97}.variant-copy{width:100%;padding:25px 22px 27px}.variant-copy h3{font-size:63px;margin:14px 0 12px}.variant-top{gap:4px}.taste{font-size:14px}.specs{margin:16px 0;padding:12px 0;gap:43px}.specs strong{font-size:29px}.cycle button{width:38px;height:38px}.suggestion{font-size:12px}.counter{font-size:15px}
.photo-mark{display:none}footer{flex-wrap:wrap;gap:12px;padding:29px var(--pad);font-size:10px}footer>span{flex-basis:100%;order:3}.footer-brand img{width:110px}.top{padding:5px 0}
.hero-copy:lang(zh-Hans) h1{font-size:clamp(44px,10vw,70px);line-height:1.2}.hero:lang(en) h1{max-width:9ch}
}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media(min-width:721px){.hero-index{font-size:clamp(13px,1.25vw,22px)}}
@media(max-width:720px){.hero-art{mask-image:linear-gradient(to bottom,transparent,#000 6%,#000 88%,transparent)}.hero{background:linear-gradient(180deg,#f1ebe2 3%,#e5dcd2 56%,#dacfc9 93%)}.hero-index{position:relative;bottom:auto;left:auto;right:auto;padding:0 8px 7px;background:none;gap:7px;margin-top:-18px}.hero-index a{min-height:32px}.hero-copy:lang(zh-Hans) h1 span,.hero-copy:lang(zh-Hans) h1 em{display:block}.hero-copy:lang(zh-Hans) h1{line-height:1.06}.hero-copy:lang(zh-Hans) h1 span:after{content:none}}

.binding {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 30px);
  align-items: start;
  padding: clamp(44px, 4.7vw, 88px) var(--pad) clamp(48px, 5vw, 90px);
  background: #3e2834;
  color: #fcf4ea;
}
.binding-copy {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 34%);
  align-items: end;
  column-gap: 4vw;
  margin-bottom: clamp(9px,1vw,20px);
}
.binding .chapter { grid-column: 1 / -1; color: #e1cbc9; }
.binding h2 {
  margin: 12px 0 0;
  font-size: clamp(52px, 5.5vw, 105px);
  line-height: 1; letter-spacing: -.048em;
  text-wrap: balance;
}
.binding-copy p:not(.eyebrow) { font-size: clamp(14px,1.05vw,18px); color: #eee0d9; line-height: 1.65; max-width: 43ch; }
.binding h2:lang(zh-Hans) { font-size: clamp(40px, 4.3vw, 82px); line-height: 1.16; letter-spacing: .02em; }
.binding-plate { --sample: #c7ac89; }
.binding-lemon { --sample: #efd450; }
.binding-plum { --sample: #b57aa4; }
.binding-quince { --sample: #bf8253; }
.binding-forest { --sample: #78a275; }
.binding-plate img { width: 100%; height: auto; aspect-ratio: .79; object-fit: cover; object-position: 50% 68%; }
.binding-plate figcaption {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding-top: 10px; font: italic clamp(19px, 1.75vw, 30px)/1.15 var(--serif);
}
.binding-plate i { width: 24px; height: 3px; background: var(--sample); }
@media (min-width: 1000px) {
  .binding-lemon, .binding-quince { margin-top: 1.7vw; }
  .binding-plum { margin-top: 3.4vw; }
}
@media (max-width: 999px) {
  .binding { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 18px; }
  .binding-copy { display: block; grid-column: auto; align-self: center; margin: 0; }
  .binding-copy h2 { font-size: clamp(43px,5.3vw,56px); margin: 14px 0; }
  .binding-copy p:not(.eyebrow) { font-size: 14px; }
}
@media (max-width: 620px) {
  .binding { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 38px var(--pad) 40px; gap: 24px 14px; }
  .binding-copy h2 { font-size: clamp(34px,9vw,50px); margin: 11px 0; }
  .binding-copy h2:lang(zh-Hans) { font-size: 32px; }
  .binding-copy p:not(.eyebrow) { font-size: 13px; line-height: 1.55; }
  .binding-plate figcaption { font-size: 19px; padding-top: 7px; }
  .binding-plate i { width: 16px; }
}

.story { display:grid; grid-template-columns:1fr 1fr; align-items:center; background:#efeae1; }
.story-copy { padding:60px var(--pad); }
.story h2 { font-size:clamp(48px,4.8vw,88px);line-height:1; margin:24px 0; }
.story h2 span,.story h2 em { display:block; }
.story h2 em { color:#66513b; }
.story-copy>p:not(.eyebrow) {font-size:clamp(14px,1.05vw,18px);line-height:1.75;max-width:36ch;color:#51483f}
.story-copy .story-intro {margin-bottom:16px}
.story-image img {width:100%;height:auto}
.story h2:lang(zh-Hans) {font-size:clamp(40px,4vw,74px);line-height:1.3}
.story h2:lang(zh-Hans) em {font-style:normal}
.contact {display:grid;grid-template-columns:1fr 1fr;gap:6vw;padding:clamp(50px,6vw,110px) var(--pad);background:#f8f4ed}
.contact h2 {font-size:clamp(48px,5vw,90px);margin:16px 0 0}
.contact-copy {align-self:center}
.contact-copy p {font-size:14px;line-height:1.7;max-width:43ch;color:#51483f}
.contact-copy a {display:inline-flex;align-items:center;gap:30px;font-family:var(--serif);font-size:clamp(25px,2.6vw,46px);border-bottom:1px solid #978575;padding:12px 0}
.contact-copy a:hover {color:#79465f}
footer {background:#39252f}
@media (min-width:721px) and (max-width:1000px) {
 .masthead nav {gap:16px} .masthead nav a{font-size:11px}
 .story-copy {padding:30px var(--pad)} .story h2 {font-size:43px}
}
@media(max-width:720px) {
 .story {display:flex;flex-direction:column;align-items:stretch}
 .story-copy {padding:40px var(--pad) 28px}
 .story h2 {font-size:clamp(48px,10.7vw,70px);margin:17px 0}
 .story h2:lang(zh-Hans){font-size:40px}
 .story-copy>p:not(.eyebrow) {font-size:14px;max-width:39ch}
 .story-image {width:90%;align-self:flex-end}
 .contact {display:block;padding:40px var(--pad)}
 .contact h2{margin:13px 0 20px}
 .contact-copy a{font-size:30px}
}