.sample-preview,.sample-finishes{border-top:1px solid var(--line)}
.sample-jumps{display:flex;flex-wrap:wrap;gap:10px;padding-top:0;padding-bottom:35px}.sample-jumps a{display:flex;align-items:center;min-height:44px;border:1px solid var(--line);padding:10px 18px;font-size:13px;transition:background .2s,color .2s}.sample-jumps a:hover{background:var(--ink);color:#fff}.sample-feature[id],.sample-finishes[id]{scroll-margin-top:115px}
.sample-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:54px 28px}
.sample-image{position:relative;display:block;width:100%;padding:0;border:0;background:#e8e4dc;overflow:hidden;cursor:zoom-in;color:var(--ink);text-align:start}
.sample-image img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;display:block;transition:transform .7s cubic-bezier(.2,.65,.25,1)}
.sample-image:hover img{transform:scale(1.035)}
.sample-image:focus-visible{outline:3px solid var(--sage);outline-offset:5px}
.sample-expand{position:absolute;inset-inline-end:14px;bottom:14px;display:grid;place-items:center;width:40px;height:40px;background:rgba(248,247,243,.94);border:1px solid rgba(36,42,38,.12);transition:background .2s,transform .2s}
.sample-expand svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.3;fill:none}
.sample-image:hover .sample-expand{transform:translateY(-3px);background:#fff}
.sample-card h3{font-size:30px;line-height:1.2;margin:23px 0 13px;letter-spacing:-.025em}
.sample-card>p{font-size:15px;line-height:1.8;max-width:48ch}
.sample-feature{display:grid;grid-template-columns:1.15fr 1fr;gap:8%;align-items:center;border-top:1px solid var(--line)}
.sample-feature figure{margin:0;min-width:0}
.sample-feature .label{margin-bottom:22px}
.sample-feature h2{font-size:clamp(37px,4vw,60px);line-height:1.13}
.sample-feature .lead{font-size:17px;line-height:1.85;margin-top:25px}
.sample-tags{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.sample-tags li{font-size:13px;border:1px solid var(--line);padding:8px 13px;line-height:1.5}
.craft-sample{margin:0 0 22px;max-width:420px}
.craft-sample img,.bag-size-diagram{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#eeece5}
.resource-note-image{margin:0 0 24px}.resource-note-image .bag-size-diagram{aspect-ratio:3/2}
.article-thumb img{aspect-ratio:3/2;object-fit:contain}
.article-body>figure img{aspect-ratio:3/2;object-fit:contain}
.bag-size-diagram{color:var(--sage)}
.sample-dialog{padding:0;border:0;width:min(1080px,calc(100vw - 48px));max-width:1080px;max-height:92dvh;overflow:auto;background:var(--paper,#f8f7f3);color:var(--ink);box-shadow:0 20px 90px #0004}
.sample-dialog::backdrop{background:rgba(24,29,25,.78);backdrop-filter:blur(5px)}
.sample-dialog[open]{animation:sample-in .24s ease-out}
.sample-dialog-bar{position:sticky;top:0;z-index:1;display:flex;justify-content:flex-end;padding:8px 16px;background:var(--paper,#f8f7f3)}
.sample-close{display:flex;align-items:center;gap:20px;min-height:44px;padding:0 6px;background:none;border:0;font:inherit;font-size:13px;color:inherit;cursor:pointer}
.sample-close span{font-size:30px;font-weight:300}
.sample-dialog>img{display:block;width:100%;height:auto;max-height:65dvh;object-fit:contain;background:#e9e5de}
.sample-dialog-copy{padding:26px 32px 32px}
.sample-dialog-copy h2{font-size:31px;line-height:1.25;margin:0 0 14px}
.sample-dialog-copy p{font-size:15px;line-height:1.8;max-width:75ch}
@keyframes sample-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
html[lang=zh-CN] body{font-family:'Microsoft YaHei UI','PingFang SC','Noto Sans CJK SC',sans-serif;line-height:1.85}
html[lang=zh-CN] h1,html[lang=zh-CN] h2,html[lang=zh-CN] h3{font-family:'Songti SC','Noto Serif CJK SC','SimSun',serif;font-weight:600;letter-spacing:.015em;line-height:1.4;text-wrap:pretty}
html[lang=zh-CN] .brand{font-family:'DM Serif Display',Georgia,serif;letter-spacing:-.025em}
html[lang=zh-CN] .hero h1{font-size:clamp(40px,5.2vw,79px);line-height:1.35}
html[lang=zh-CN] .page-intro h1{font-size:clamp(40px,5vw,68px)}
html[lang=zh-CN] .section-head h2,html[lang=zh-CN] .sample-feature h2{font-size:clamp(33px,3.4vw,48px)}
html[lang=zh-CN] .sample-card h3{font-size:25px}
html[lang=zh-CN] .label{letter-spacing:.08em}
@media(max-width:1000px){.sample-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}.sample-feature{gap:5%}.sample-feature h2{font-size:39px}}
@media(max-width:680px){.sample-grid,.sample-feature{grid-template-columns:1fr}.sample-grid{gap:38px}.sample-feature{gap:30px}.sample-feature .label{margin-bottom:14px}.sample-feature h2{font-size:36px}.sample-feature .lead{font-size:16px;margin-top:20px}.sample-card h3{font-size:29px;margin-top:19px}.sample-card>p{font-size:15px;max-width:none}.sample-expand{inset-inline-end:10px;bottom:10px}.sample-tags{margin-top:22px;gap:8px}.sample-tags li{font-size:12px}.sample-dialog{width:calc(100vw - 24px);max-height:94dvh}.sample-dialog-copy{padding:22px}.sample-dialog-copy h2{font-size:27px}.sample-dialog-copy p{font-size:14px}.sample-dialog-bar{padding-inline:10px}html[lang=zh-CN] .hero h1{font-size:39px}html[lang=zh-CN] .page-intro h1{font-size:38px}html[lang=zh-CN] .sample-card h3{font-size:25px}html[lang=zh-CN] .quote h2{font-size:38px}html[lang=zh-CN] .factory-preview h2{font-size:35px}}
@media(prefers-reduced-motion:reduce){.sample-image img,.sample-expand{transition:none}.sample-image:hover img,.sample-image:hover .sample-expand{transform:none}.sample-dialog[open]{animation:none}}