@font-face{font-family:"Jost";src:url("../fonts/Jost.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"YC Serif SC";src:url("../fonts/YCSerifSC.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"YC Serif JP";src:url("../fonts/YCSerifJP.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --bg:#f6f4f0; --paper:#fbfaf7; --stone:#ebe7e0; --line:#ddd7ce;
  --ink:#2b2a28; --soft:#524e49; --muted:#7b756c; --accent:#8a6a4a; --wa:#25d366;
  --geo:"Jost","Futura","Century Gothic","Avenir Next","Helvetica Neue",Arial,"YC Serif SC","Songti SC","STSong","Noto Serif SC","Source Han Serif SC","SimSun",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,"YC Serif SC","Songti SC","STSong","Noto Serif SC","Source Han Serif SC","SimSun",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
[hidden]{display:none!important}
.container{width:min(1240px,90%);margin:0 auto}
h1,h2,h3{font-family:var(--geo);font-weight:400;line-height:1.15;letter-spacing:.01em}
h2{font-size:clamp(1.8rem,3.2vw,2.6rem);margin-bottom:1rem}
h3{font-size:1.1rem;font-weight:500}
.eyebrow{font-family:var(--geo);font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:1.1rem}
.eyebrow.center{text-align:center}
.muted{color:var(--soft)}
.wordmark{font-family:var(--geo);font-weight:500;font-size:1.25rem;letter-spacing:.38em;white-space:nowrap;color:var(--ink)}
.wordmark.light{color:#fff}

/* placeholders */
.ph{background:#fff3a8;color:#5a4a00;padding:0 .2em;border-radius:2px;box-shadow:0 0 0 1px #e9d55d inset}
body.hide-ph .ph{background:none;color:inherit;box-shadow:none;padding:0}
.draft-bar{background:#2b2a28;color:#f1e7a6;font-size:.8rem;text-align:center;padding:.45rem 1rem;display:flex;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap}
.draft-bar button{background:transparent;border:1px solid #f1e7a6;color:#f1e7a6;border-radius:20px;padding:.1rem .8rem;cursor:pointer;font-size:.75rem}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;justify-content:center;padding:.9rem 1.8rem;font-family:var(--geo);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;transition:.25s;border:1px solid transparent;cursor:pointer;border-radius:0}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{filter:brightness(.93)}
.btn.full{width:100%}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(246,244,240,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.05)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.menu{display:flex;gap:2.6rem}
.menu a{font-family:var(--geo);font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);transition:.2s}
.menu a:hover{color:var(--ink)}
.nav-actions{display:flex;align-items:center;gap:1rem}
.lang{border:1px solid var(--line);background:transparent;padding:.35rem .9rem;cursor:pointer;font-size:.8rem;color:var(--ink);letter-spacing:.08em}
.lang:hover{border-color:var(--ink)}
.burger{display:none;background:none;border:0;cursor:pointer;width:28px}
.burger span{display:block;height:1.5px;background:var(--ink);margin:7px 0}

/* hero */
.hero{padding:3.5rem 0 5rem}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:5rem;align-items:center}
.hero h1{font-size:clamp(2.6rem,5.2vw,4.6rem);font-weight:300;margin-bottom:1.6rem;letter-spacing:-.005em}
.hero .lead{color:var(--soft);max-width:460px;margin-bottom:2.4rem;font-size:1.05rem}
.btns{display:flex;gap:1rem;flex-wrap:wrap}
.hero-media{aspect-ratio:4/5;overflow:hidden;background:var(--stone)}
.hero-media img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}

/* stats */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;padding:2.4rem 0}
.stats-grid div{border-right:1px solid var(--line);padding:0 1rem}
.stats-grid div:last-child{border:0}
.stats strong{display:block;font-family:var(--geo);font-weight:300;font-size:1.9rem;margin-bottom:.2rem}
.stats span{font-size:.8rem;color:var(--muted);letter-spacing:.05em}

/* sections */
.section{padding:7rem 0}
.section-head{text-align:center;max-width:680px;margin:0 auto 2.6rem}
.filters{display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap;margin-bottom:3.2rem}
.filters button{background:none;border:1px solid transparent;padding:.5rem 1.1rem;font-family:var(--geo);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:.2s}
.filters button:hover{color:var(--ink)}
.filters button.active{border-color:var(--ink);color:var(--ink)}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:3.5rem 2.2rem}
.product{transition:opacity .3s}
.product.hide{display:none}
.p-img{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--stone)}
.p-img img{width:100%;height:100%;object-fit:cover;cursor:pointer}   /* grid cards are static: no hover zoom, no crossfade, no second image */
.p-img.contain img{object-fit:contain;padding:6%}
.p-body{padding-top:1.2rem}
.p-type{font-family:var(--geo);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.p-body h3{margin-bottom:.2rem}
.p-mat{font-size:.9rem;color:var(--soft)}
.swatches{display:flex;gap:.5rem;margin-top:.8rem}
.sw{display:inline-block;width:18px;height:18px;border-radius:50%;background:var(--c);border:1px solid rgba(0,0,0,.12);box-shadow:0 0 0 3px var(--bg);outline:1px solid transparent;padding:0}
button.sw{cursor:pointer;position:relative}
.pcard button.sw::after{content:"";position:absolute;inset:-7px}   /* bigger tap target, same look */
.sw.active{outline-color:var(--ink);outline-offset:2px}
.note{text-align:center;color:var(--muted);font-size:.85rem;margin-top:3.5rem}

/* material */
.material{background:var(--stone);padding:7rem 0}
.material-grid{display:grid;grid-template-columns:1fr 1fr .6fr;gap:4rem;align-items:center}
.m-img{aspect-ratio:4/5;overflow:hidden}
.m-img img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.m-img.small{align-self:end}
.m-text p{color:var(--soft);margin-bottom:1.6rem}
.mat-list{list-style:none;display:flex;flex-wrap:wrap;gap:.8rem 1.4rem}
.mat-list li{display:flex;align-items:center;gap:.55rem;font-size:.88rem;color:var(--soft)}
.mat-list .sw{box-shadow:0 0 0 3px var(--stone)}

/* film */
.film{padding:7rem 0 0}
.film-frame{max-width:1100px;margin:0 auto;background:#000}
.film-frame video{width:100%;display:block;max-height:80vh;object-fit:cover}

/* gallery */
.gallery{columns:4 240px;column-gap:1.2rem}
.gallery img{width:100%;margin-bottom:1.2rem;break-inside:avoid;cursor:zoom-in;transition:opacity .3s}
.gallery img:hover{opacity:.88}

/* about */
.about{background:var(--paper);border-top:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:start}
.about p{color:var(--soft);margin-bottom:1.2rem}
.about .btn{margin-top:1rem}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.why{padding:2rem 1.6rem 2rem 0;border-bottom:1px solid var(--line)}
.why:nth-child(odd){border-right:1px solid var(--line)}
.why:nth-child(even){padding-left:1.6rem}
.why .num{font-family:var(--geo);font-size:.75rem;color:var(--muted);letter-spacing:.2em}
.why h3{margin:.6rem 0 .4rem}
.why p{font-size:.9rem;margin:0}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:6rem;align-items:start}
.contact-btns{display:flex;gap:.8rem;margin:2rem 0;flex-wrap:wrap}
.contact-list{list-style:none;border-top:1px solid var(--line)}
.contact-list li{display:flex;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line);font-size:.93rem}
.contact-list b{min-width:96px;color:var(--muted);font-weight:400;font-size:.85rem}
.contact-list a{border-bottom:1px solid var(--line)}
.form{background:var(--paper);padding:2.6rem;border:1px solid var(--line)}
.form label{display:block;margin-bottom:1.3rem;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-family:var(--geo)}
.form label span{display:block;margin-bottom:.5rem}
.form input,.form select,.form textarea{width:100%;padding:.75rem 0;border:0;border-bottom:1px solid var(--line);font:inherit;font-family:var(--sans);font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--ink);background:transparent;border-radius:0;transition:.2s}
.form textarea{border:1px solid var(--line);padding:.75rem}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.form-note{font-size:.78rem;color:var(--muted);margin-top:1rem;text-align:center}

.footer{background:var(--ink);color:rgba(255,255,255,.65);padding:3.6rem 0}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.footer p{font-size:.85rem;margin-top:.8rem}

.wa-float{position:fixed;right:22px;bottom:22px;width:54px;height:54px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.2);z-index:60;transition:.25s}
.wa-float:hover{transform:scale(1.07)}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(20,19,18,.94);z-index:100;display:flex;align-items:center;justify-content:center}
.lightbox img{max-width:88vw;max-height:88vh;object-fit:contain}
.lb-close,.lb-nav{position:absolute;background:none;border:0;color:#fff;font-size:2.4rem;cursor:pointer;opacity:.7;padding:1rem}
.lb-close:hover,.lb-nav:hover{opacity:1}
.lb-close{top:.5rem;right:1rem}
.lb-nav.prev{left:1rem}.lb-nav.next{right:1rem}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .9s,transform .9s}
.reveal.in{opacity:1;transform:none}

html:is([lang="zh-CN"],[lang="ja"]) .hero h1{font-weight:400;letter-spacing:.04em}
html:is([lang="zh-CN"],[lang="ja"]) .eyebrow,html:is([lang="zh-CN"],[lang="ja"]) .menu a,html:is([lang="zh-CN"],[lang="ja"]) .filters button,html:is([lang="zh-CN"],[lang="ja"]) .btn{letter-spacing:.12em}

@media (max-width:1000px){
  .hero-grid,.about-grid,.contact-grid{grid-template-columns:1fr;gap:3rem}
  .products{grid-template-columns:repeat(2,1fr)}
  .material-grid{grid-template-columns:1fr 1fr}
  .m-img.small{display:none}
}
@media (max-width:760px){
  .menu{position:fixed;top:74px;left:0;right:0;background:var(--bg);flex-direction:column;gap:0;padding:0 5%;max-height:0;overflow:hidden;transition:max-height .35s;border-bottom:1px solid var(--line)}
  .menu.open{max-height:320px}
  .menu a{padding:1.1rem 0;border-bottom:1px solid var(--line)}
  .burger{display:block}
  .wordmark{font-size:1.05rem;letter-spacing:.32em}
  .hero{padding:1.5rem 0 3.5rem}
  .hero-grid{gap:2rem}
  .hero-media{order:-1;aspect-ratio:4/4.4}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:1.6rem 0}
  .stats-grid div:nth-child(2){border:0}
  .stats strong{font-size:1.4rem;white-space:nowrap}
  .section,.material{padding:4.5rem 0}
  .products{grid-template-columns:1fr;gap:3rem}
  .filters{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin:0 -5% 2rem;padding:0 5%}
  .filters button{white-space:nowrap}
  .material-grid{grid-template-columns:1fr;gap:2rem}
  .gallery{columns:2;column-gap:.7rem}
  .gallery img{margin-bottom:.7rem}
  .why-grid{grid-template-columns:1fr}
  .why,.why:nth-child(even){padding:1.5rem 0;border-right:0}
  .row2{grid-template-columns:1fr;gap:0}
  .form{padding:1.6rem}
  .footer-inner{flex-direction:column;align-items:flex-start}
}

/* ===== Big editorial layouts ===== */
.bleed-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eyebrow.light{color:rgba(255,255,255,.82)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--bg)}
.btn-line-light{border-color:rgba(255,255,255,.8);color:#fff}
.btn-line-light:hover{background:#fff;color:var(--ink)}

/* full-screen hero */
.hero-full{position:relative;height:calc(100vh - var(--hoff,100px));min-height:560px;overflow:hidden;color:#fff;display:flex;align-items:flex-end;background:#9d9387}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,15,.15) 0%,rgba(20,18,15,.05) 40%,rgba(20,18,15,.6) 100%)}
.hero-inner{position:relative;width:min(1240px,90%);margin:0 auto;padding-bottom:clamp(52px,8vh,84px);max-width:min(1240px,90%)}
.hero-inner .eyebrow{font-size:.6rem;letter-spacing:.26em;margin-bottom:.55rem}
.hero-inner .btns{gap:.6rem;align-items:center}
.hero-inner .btn{padding:.55rem 1.15rem;font-size:.62rem;letter-spacing:.16em}
.hero-mark{font-family:var(--geo);font-weight:400;font-size:clamp(1.9rem,3.6vw,3.4rem);letter-spacing:.2em;line-height:1;margin:0 0 .7rem -.04em;white-space:nowrap;text-shadow:0 1px 12px rgba(0,0,0,.25)}
.hero-full h1{font-size:clamp(.88rem,1.15vw,1.05rem);font-weight:300;margin-bottom:1.1rem;letter-spacing:.04em;line-height:1.4;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.scroll-cue{position:absolute;left:50%;bottom:26px;width:1px;height:46px;background:rgba(255,255,255,.35);overflow:hidden}
.scroll-cue span{position:absolute;left:0;top:-46px;width:1px;height:46px;background:#fff;animation:cue 2.2s infinite}
@keyframes cue{to{top:46px}}

/* intro statement */
.intro{padding:8rem 0 6rem;text-align:center}
.narrow{max-width:900px}
.intro-text{font-family:var(--geo);font-weight:300;font-size:clamp(1.15rem,1rem + 1.1vw,1.6rem);line-height:1.65;letter-spacing:.01em;color:var(--ink);max-width:36em;margin:0 auto}

/* split feature */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:92vh;background:var(--paper)}
.split.reverse .split-img{order:2}
.split-img{position:relative;overflow:hidden;min-height:60vh;background:var(--stone)}
.split-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:transform 1.2s ease}
.split:hover .split-img img{transform:scale(1.02)}
.split-text{display:flex;flex-direction:column;justify-content:center;padding:6rem clamp(2rem,7vw,8rem)}
.split-text .big{font-size:clamp(3rem,6vw,5.6rem);font-weight:300;letter-spacing:.06em;margin-bottom:.3rem}
.split-text .p-type{margin-bottom:2rem}
.split-copy{color:var(--soft);max-width:460px;margin-bottom:2rem;font-size:1.02rem}
.split-text .mat-list{margin-bottom:2.6rem}
.split-text .mat-list .sw{box-shadow:0 0 0 3px var(--paper)}
.split-text .btn{align-self:flex-start}

/* full-bleed bands */
.band{position:relative;height:88vh;min-height:520px;overflow:hidden;color:#fff;background:#9d9387}
.band img{cursor:zoom-in}
.band-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,15,0) 45%,rgba(20,18,15,.55) 100%);pointer-events:none}
.band-cap{position:absolute;left:max(5vw,calc((100vw - 1240px)/2));bottom:9vh;max-width:640px;pointer-events:none}
.band-right .band-cap{left:auto;right:max(5vw,calc((100vw - 1240px)/2));text-align:right}
.band-title{font-family:var(--geo);font-weight:300;font-size:clamp(1.9rem,4.4vw,3.8rem);line-height:1.12}

.p-name{font-family:var(--geo);font-weight:400;font-size:1.35rem;letter-spacing:.08em}

@media (max-width:1000px){
  .split{grid-template-columns:1fr;min-height:0}
  .split.reverse .split-img{order:0}
  .split-img{min-height:0;aspect-ratio:4/5}
  .split-text{padding:3.5rem 5% 4.5rem}
}
@media (max-width:760px){
  .hero-full{height:calc(100svh - var(--hoff,100px));min-height:520px}
  .hero-mark{font-size:7.6vw;letter-spacing:.18em;margin-bottom:.5rem}
  .hero-inner{padding-bottom:70px}
  .hero-inner .eyebrow{font-size:.52rem;letter-spacing:.2em;margin-bottom:.4rem}
  .hero-full h1{font-size:.8rem;margin-bottom:.8rem}
  .hero-inner .btns{flex-wrap:nowrap;gap:.9rem}
  .hero-inner .btn{padding:.5rem .85rem;font-size:.56rem;letter-spacing:.12em;white-space:nowrap}
  .hero-inner .btn-line-light{border-color:transparent;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.7);font-size:.56rem}
  .hero-inner .btn-line-light:hover{background:none;color:#fff}
  .intro{padding:4.5rem 0 3.5rem}
  .band{height:72vh;min-height:420px}
  .band-cap,.band-right .band-cap{left:5%;right:5%;text-align:left}
}

/* editorial gallery grid (overrides columns layout) */
.gallery-wrap{width:min(1600px,96%);margin:0 auto}
.gallery{columns:auto;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:min(26vw,420px);gap:12px}
.gallery img{width:100%;height:100%;object-fit:cover;margin:0}
.gallery img:nth-child(1){grid-row:span 2}
.gallery img:nth-child(7){grid-column:span 2}
@media (max-width:760px){
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:58vw;gap:6px}
  .gallery img:nth-child(1){grid-row:auto}
  .gallery img:nth-child(7){grid-column:span 2}
}

/* ===== Photo-led additions ===== */
picture{display:contents}
.slides{position:absolute;inset:0;overflow:hidden}
.track{display:flex;height:100%;transition:transform .95s cubic-bezier(.65,0,.35,1);will-change:transform}
.slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden;background:#9d9387}
.hero-full{touch-action:pan-y}
@media (prefers-reduced-motion:reduce){.track{transition:none}}
.product.wide{grid-column:span 2}
.product.wide .p-img{aspect-ratio:5/3}
.split-img.tall{min-height:100vh}
@media (max-width:1000px){.split-img.tall{min-height:0;aspect-ratio:3/4}}
@media (max-width:760px){
  .product.wide{grid-column:auto}
  .product.wide .p-img{aspect-ratio:4/5}
}

/* WeChat */
.btn-wechat{background:#07c160;color:#fff;position:relative;text-transform:none;letter-spacing:.06em}
.btn-wechat:hover{filter:brightness(.93)}
.btn-wechat .tip,.copy-btn .tip{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);background:var(--ink);color:#fff;font-size:.72rem;padding:.2rem .6rem;white-space:nowrap;letter-spacing:.05em}
.wechat-id{font-family:var(--geo);letter-spacing:.06em;font-weight:500}
.copy-btn{position:relative;margin-left:auto;background:none;border:1px solid var(--line);padding:.1rem .8rem;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);cursor:pointer;font-family:var(--geo)}
.copy-btn:hover,.copy-btn.done{border-color:var(--ink);color:var(--ink)}
.foot-contact{font-size:.82rem;color:rgba(255,255,255,.55)}
.foot-contact a{border-bottom:1px solid rgba(255,255,255,.25)}

/* hero carousel controls */
.hero-shade{pointer-events:none;background:linear-gradient(180deg,rgba(18,16,13,.12) 0%,rgba(18,16,13,0) 16%,rgba(18,16,13,0) 58%,rgba(18,16,13,.46) 100%)}
.hero-inner{pointer-events:none}.hero-inner a,.hero-inner .btns{pointer-events:auto}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(20,18,15,.18);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 4px;backdrop-filter:blur(4px);transition:.25s;opacity:.75}
.hero-arrow:hover,.hero-arrow:focus-visible{background:#fff;color:var(--ink);opacity:1}
.hero-arrow.prev{left:clamp(12px,2.2vw,32px)}.hero-arrow.next{right:clamp(12px,2.2vw,32px)}
.hero-dots{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;display:flex;gap:6px}
.hero-dots button{width:26px;height:22px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.hero-dots button::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:rgba(255,255,255,.5);transition:.35s}
.hero-dots button.on::after{width:26px;margin-left:-13px;border-radius:4px;background:#fff}
.hero-cap{position:absolute;z-index:3;right:100px;bottom:30px;text-align:right;color:#fff;display:flex;flex-direction:column;gap:.1rem;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.hero-cap b{font-family:var(--geo);font-weight:400;font-size:.88rem;letter-spacing:.14em}
.hero-cap span{font-family:var(--geo);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;opacity:.85}
html:is([lang="zh-CN"],[lang="ja"]) .hero-cap span{letter-spacing:.12em}
@media (max-width:760px){
  .hero-arrow{width:38px;height:38px;font-size:1.35rem;top:auto;bottom:10px;transform:none}
  .hero-arrow.prev{left:5%}.hero-arrow.next{right:auto;left:calc(5% + 46px)}
  .hero-dots{left:auto;right:calc(5% + 72px);transform:none}
  .hero-cap{right:auto;left:5%;bottom:auto;top:14px;text-align:left}
  .hero-cap b{font-size:.78rem}.hero-cap span{font-size:.5rem;letter-spacing:.18em}
  .hero-dots{bottom:20px}
}

/* ===== category + product pages ===== */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:1.3rem 0 .4rem;font-family:var(--geo);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.crumbs a{color:var(--soft);border-bottom:1px solid transparent}.crumbs a:hover{color:var(--ink);border-color:var(--ink)}
.crumbs i{font-style:normal;opacity:.6}.crumbs span[aria-current]{color:var(--ink)}
.subnav{display:flex;flex-wrap:wrap;gap:.4rem;padding:.8rem 0 .4rem}
.subnav a{border:1px solid transparent;padding:.45rem 1.05rem;font-family:var(--geo);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);transition:.2s}
.subnav a:hover{color:var(--ink)}.subnav a.on{border-color:var(--ink);color:var(--ink)}
.banner{position:relative;height:clamp(300px,41.67vw,600px);overflow:hidden;background:#9d9387;color:#fff;display:flex;align-items:flex-end}
.banner picture,.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,12,9,.22),rgba(15,12,9,0) 38%)}   /* QA 29 Oct: max alpha .22 (was .55/.5) - only a light scrim behind the title at bottom-left */
.banner-text{position:relative;padding-bottom:clamp(1.8rem,5vh,3.4rem)}
.banner-text h1{text-shadow:0 1px 14px rgba(0,0,0,.28);font-size:clamp(2.2rem,5.4vw,4.4rem);font-weight:300;letter-spacing:.02em}
.banner-text .eyebrow{margin-bottom:.7rem}
.cat-intro{padding:2rem 0 .6rem;text-align:center}
.cat-grid{padding-top:2rem}
.pcard .p-img{display:block}
.p-price{margin-top:.55rem;font-size:.9rem}
.price{font-family:var(--geo);letter-spacing:.06em}
.p-more{display:inline-block;margin-top:.6rem;font-family:var(--geo);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:2px}
.p-more:hover{border-color:var(--ink)}
.p-name a:hover,.p-img-link:hover{opacity:.75}
.nf{padding:6rem 0;text-align:center}
/* product detail */
.pd{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);padding:1.6rem 0 4rem;align-items:start}
.pd-gallery{position:sticky;top:90px}
.pd-main{position:relative;aspect-ratio:4/5;background:var(--stone);overflow:hidden;cursor:zoom-in}
.pd-main img{width:100%;height:100%;object-fit:cover}
.pd-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(20,18,15,.28);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 3px;backdrop-filter:blur(4px)}
.pd-arrow:hover{background:#fff;color:var(--ink)}
.pd-arrow.prev{left:12px}.pd-arrow.next{right:12px}
.pd-thumbs{display:flex;gap:.6rem;margin-top:.7rem;overflow-x:auto;padding-bottom:4px}
.pd-thumbs button{flex:0 0 74px;height:92px;border:1px solid transparent;padding:0;background:var(--stone);cursor:pointer;opacity:.62;transition:.2s}
.pd-thumbs button img{width:100%;height:100%;object-fit:cover}
.pd-thumbs button:hover{opacity:1}.pd-thumbs button.on{opacity:1;border-color:var(--ink)}
.pd-info h1{font-size:clamp(2.2rem,4vw,3.2rem);font-weight:300;letter-spacing:.06em;margin-bottom:.5rem}
.pd-price{font-size:1.05rem;margin-bottom:1.3rem}
.pd-desc{color:var(--soft);max-width:520px;margin-bottom:1.8rem;font-size:1.02rem}
.pd-lbl{font-family:var(--geo);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.pd-lbl b{font-weight:400;color:var(--ink);letter-spacing:.06em;text-transform:none;font-size:.88rem}
.pd-opt{margin-bottom:1.8rem}
.pd-sw{margin-top:.4rem;gap:.7rem}
.pd-sw .sw{width:28px;height:28px;cursor:pointer}
.specs{border-top:1px solid var(--line);margin-bottom:2rem}
.spec{display:grid;grid-template-columns:minmax(120px,36%) 1fr;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line);font-size:.93rem}
.spec dt{color:var(--muted);font-size:.85rem}.spec dd{margin:0}
.pd-cta{padding-top:.4rem}
.pd-cta .contact-btns{margin:.6rem 0 .8rem}
.form-note.left{text-align:left;margin-top:.4rem}
.related{background:var(--paper);border-top:1px solid var(--line)}
.rel-h{text-align:center;margin-bottom:2.4rem}
.related .products{grid-template-columns:repeat(3,1fr)}
/* home: category tiles */
.cat-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 3rem}
.cat-tile{position:relative;display:block;aspect-ratio:4/3.3;overflow:hidden;color:#fff;background:var(--stone)}
.cat-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s ease}
.cat-tile:hover img{transform:scale(1.05)}
.cat-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,12,9,.62),rgba(15,12,9,.04) 60%)}
.cat-tile span{position:absolute;left:1.1rem;bottom:.9rem;z-index:1;font-family:var(--geo);letter-spacing:.14em;text-transform:uppercase;font-size:.82rem}
.cat-tile span small{display:block;letter-spacing:.06em;text-transform:none;opacity:.85;font-size:.74rem;margin-top:.1rem}
.view-all{text-align:center;margin:2.6rem 0 0}
@media (max-width:1000px){
  .pd{grid-template-columns:minmax(0,1fr)}.pd-gallery{position:static}
  .related .products{grid-template-columns:1fr 1fr}
  .cat-tiles{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .pd-main{aspect-ratio:1/1.05}
  .related .products{grid-template-columns:1fr}
  .banner{height:clamp(260px,46vh,420px)}
  .spec{grid-template-columns:1fr}
  .pd-cta .contact-btns .btn{width:100%}
}

/* ===== brand never changes; Chinese type is set smaller + more refined than Latin ===== */
.wordmark,.hero-mark{font-family:"Jost","Futura","Century Gothic","Avenir Next","Helvetica Neue",Arial,sans-serif;font-variant-ligatures:none}
html:is([lang="zh-CN"],[lang="ja"]) .intro{padding:6.5rem 0 5rem}
html:is([lang="zh-CN"],[lang="ja"]) .intro-text{font-weight:300;font-size:clamp(17px,15px + .55vw,21px);line-height:1.9;letter-spacing:.06em;max-width:29em}
html:is([lang="zh-CN"],[lang="ja"]) h2{font-size:clamp(1.55rem,2.8vw,2.15rem);letter-spacing:.06em}
html:is([lang="zh-CN"],[lang="ja"]) .split-text .big{font-size:clamp(2.6rem,5vw,4.4rem)}
html:is([lang="zh-CN"],[lang="ja"]) .band-title{font-size:clamp(1.6rem,3.6vw,3rem);line-height:1.3;letter-spacing:.08em}
html:is([lang="zh-CN"],[lang="ja"]) .banner-text h1{font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:.1em}
html:is([lang="zh-CN"],[lang="ja"]) .pd-info h1{font-size:clamp(1.9rem,3.4vw,2.6rem);letter-spacing:.08em}
html:is([lang="zh-CN"],[lang="ja"]) .split-copy,html:is([lang="zh-CN"],[lang="ja"]) .pd-desc,html:is([lang="zh-CN"],[lang="ja"]) .about p,html:is([lang="zh-CN"],[lang="ja"]) .muted,html:is([lang="zh-CN"],[lang="ja"]) .why-grid p{font-size:.94rem;line-height:1.95;letter-spacing:.03em}
html:is([lang="zh-CN"],[lang="ja"]) .p-mat,html:is([lang="zh-CN"],[lang="ja"]) .m-text p{font-size:.88rem;line-height:1.8;letter-spacing:.02em}
html:is([lang="zh-CN"],[lang="ja"]) .p-name{letter-spacing:.06em}
@media (max-width:760px){
  html:is([lang="zh-CN"],[lang="ja"]) .intro{padding:4.5rem 0 3.6rem}
  html:is([lang="zh-CN"],[lang="ja"]) .intro-text{font-size:17.5px}
}

/* hero v2: smaller refined text, image-first (ZH tuned) */
html:is([lang="zh-CN"],[lang="ja"]) .hero-inner .eyebrow{letter-spacing:.14em}
html:is([lang="zh-CN"],[lang="ja"]) .hero-full h1{letter-spacing:.08em;font-weight:300}
html:is([lang="zh-CN"],[lang="ja"]) .hero-inner .btn{letter-spacing:.1em;font-size:.68rem}
@media (max-width:760px){html:is([lang="zh-CN"],[lang="ja"]) .hero-inner .btn{font-size:.64rem}html:is([lang="zh-CN"],[lang="ja"]) .hero-full h1{font-size:.82rem}}
.hero-inner .eyebrow,.hero-inner .btn-line-light{text-shadow:0 1px 8px rgba(0,0,0,.35)}


/* ===== 4-language switch: EN / 中文 / 日本語 / FR ===== */
.langsw{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:999px;padding:2px;gap:0;background:transparent}
.langsw button{background:none;border:0;cursor:pointer;color:var(--muted);font-family:var(--geo);font-size:.7rem;letter-spacing:.08em;line-height:1;padding:.42rem .62rem;border-radius:999px;white-space:nowrap;transition:.2s}
.langsw button:hover{color:var(--ink)}
.langsw button.on{background:var(--ink);color:#fff}
.langsw button[data-l="zh"],.langsw button[data-l="ja"]{font-family:"YC Serif SC","Songti SC","STSong",serif;letter-spacing:.02em;font-size:.68rem}
.langsw button[data-l="ja"]{font-family:"YC Serif SC","Hiragino Mincho ProN","Yu Mincho",serif}
.nav-actions{gap:.7rem}
@media (max-width:760px){
  .nav-inner{gap:.5rem}
  .wordmark{font-size:1.05rem;letter-spacing:.3em}
  .nav-actions{gap:.45rem}
  .langsw button{font-size:.64rem;padding:.4rem .46rem;letter-spacing:.04em}
  .langsw button[data-l="zh"],.langsw button[data-l="ja"]{font-size:.62rem}
  .burger{width:24px}
}
@media (max-width:370px){.wordmark{font-size:.95rem;letter-spacing:.22em}.langsw button{padding:.38rem .38rem}}

/* ===== Japanese: fitting system stack, small + refined like Chinese ===== */
html[lang="ja"]{--sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,"YC Serif JP","YC Serif SC","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;--geo:"Jost","Futura","Century Gothic","Avenir Next","YC Serif JP","YC Serif SC","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif}
html[lang="ja"] body{line-height:1.8}
html[lang="ja"] .intro-text{font-weight:300;line-height:1.95;letter-spacing:.05em}
html[lang="ja"] .eyebrow,html[lang="ja"] .menu a,html[lang="ja"] .filters button,html[lang="ja"] .btn,html[lang="ja"] .subnav a,html[lang="ja"] .crumbs,html[lang="ja"] .p-more,html[lang="ja"] .p-type,html[lang="ja"] .pd-lbl{letter-spacing:.08em;text-transform:none}
html[lang="ja"] .eyebrow,html[lang="ja"] .p-type{font-size:.72rem}
html[lang="ja"] .btn{font-size:.74rem}
html[lang="ja"] .p-more{font-size:.74rem}
html[lang="ja"] .filters button,html[lang="ja"] .subnav a{font-size:.76rem;padding-left:.9rem;padding-right:.9rem}
html[lang="ja"] .hero-full h1{letter-spacing:.08em;font-weight:300}
html[lang="ja"] .pd-info h1,html[lang="ja"] .banner-text h1{font-weight:300}
html[lang="ja"] .spec{font-size:.88rem}
html[lang="ja"] .stats span{font-size:.84rem}

/* ===== French: longer words — wrap instead of overflow ===== */
html[lang="fr"] .btn{letter-spacing:.1em;text-align:center;white-space:normal;line-height:1.35}
html[lang="fr"] .eyebrow,html[lang="fr"] .menu a,html[lang="fr"] .filters button,html[lang="fr"] .subnav a,html[lang="fr"] .crumbs,html[lang="fr"] .p-more,html[lang="fr"] .p-type{letter-spacing:.14em}
html[lang="fr"] .menu a{letter-spacing:.16em}
html[lang="fr"] .band-title{font-size:clamp(1.7rem,4vw,3.4rem)}
html[lang="fr"] .split-text .big{font-size:clamp(2.2rem,4.6vw,4rem)}
@media (max-width:1100px){html[lang="fr"] .menu{gap:1.5rem}html[lang="ja"] .menu{gap:1.8rem}}

/* ===== real catalogue: 6 category tiles, variant pills, grouped grids ===== */
.cat-tiles{grid-template-columns:repeat(3,1fr)}
.cat-tile{aspect-ratio:4/3}
.cat-tile span{right:1rem}
.cat-tile span b{display:block;font-weight:500;line-height:1.3;overflow-wrap:anywhere}
html[lang="fr"] .cat-tile span,html[lang="ja"] .cat-tile span{letter-spacing:.08em}
.cat-grid .grp-h{font-size:1.15rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;margin:3.2rem 0 1.4rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.cat-grid .grp-h:first-child{margin-top:0}
html:is([lang="zh-CN"],[lang="ja"]) .cat-grid .grp-h{text-transform:none;letter-spacing:.1em}
.pd-vars{display:flex;flex-wrap:wrap;gap:.5rem}
.pd-var{display:inline-flex;align-items:center;gap:.55rem;max-width:100%;border:1px solid var(--line);background:transparent;color:var(--soft);padding:.5rem .95rem .5rem .7rem;border-radius:999px;cursor:pointer;font-size:.84rem;line-height:1.3;text-align:left;transition:.2s}
.pd-var i{flex:0 0 auto;width:16px;height:16px;border-radius:50%;background:var(--c);border:1px solid rgba(0,0,0,.18)}
.pd-var:hover{border-color:var(--ink);color:var(--ink)}
.pd-var.active{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.split-btns{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.6rem;margin-top:.2rem}
.split-btns .p-more{margin-top:0}
.split-text h2.big a{color:inherit}
.p-card-mat,.pcard .p-mat{min-height:1.4em}
.hero-cap b{font-family:var(--geo)}
@media (max-width:1000px){.cat-tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.cat-tiles{gap:8px}.cat-tile{aspect-ratio:1/1}.cat-tile span{left:.75rem;bottom:.65rem;font-size:.7rem;letter-spacing:.1em}}

/* balanced wrapping for short display lines (esp. Japanese / French) */
.band-title,.hero-full h1,.section-head h2,.split-text h2,.intro-text{text-wrap:balance}
html[lang="ja"] .band-title,html[lang="ja"] .intro-text,html[lang="ja"] h2,html[lang="ja"] .split-copy,html[lang="ja"] .pd-desc{line-break:strict;word-break:auto-phrase}
.crumbs span[aria-current]{text-transform:none;letter-spacing:.08em}

/* hero v3: no overlay text — only the two small buttons, arrows, dots (h1 kept for SEO, visually hidden) */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.hero-shade{background:linear-gradient(180deg,rgba(18,16,13,.08) 0%,rgba(18,16,13,0) 14%,rgba(18,16,13,0) 76%,rgba(18,16,13,.3) 100%)}
.hero-cap span{display:none}
.hero-cap b{font-size:.72rem;letter-spacing:.14em;opacity:.9}
@media (max-width:760px){.hero-cap b{font-size:.62rem}}

/* =====================================================================
   HOME v5 — compact featured tiles + editorial sections ('板块')
   Rules: images dominate; text is small, sits BESIDE or BELOW photos, never on top of them.
   ===================================================================== */
.p-img{display:block}
.intro{padding:4.2rem 0 3.4rem}
.intro-text{font-size:clamp(1.02rem,.95rem + .55vw,1.3rem);line-height:1.75;max-width:34em}
html:is([lang="zh-CN"],[lang="ja"]) .intro{padding:4rem 0 3.2rem}
html:is([lang="zh-CN"],[lang="ja"]) .intro-text{font-size:clamp(14.5px,13.5px + .4vw,17px);line-height:2;letter-spacing:.08em;max-width:30em}

/* collection: small tiles + category entries */
.collection{padding:0 0 4.5rem;background:var(--bg)}
.collection .section-head{margin-bottom:1.8rem}
.collection .section-head h2{font-size:clamp(1.25rem,1rem + 1vw,1.7rem);font-weight:300;margin:0}
html:is([lang="zh-CN"],[lang="ja"]) .collection .section-head h2{font-size:clamp(1.1rem,1rem + .6vw,1.4rem)}
.mini-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.1rem}
.mini{display:block;min-width:0}
.mini-img{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--stone)}
.mini-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.mini:hover .mini-img img{transform:scale(1.04)}
.mini-t{display:block;padding-top:.6rem}
.mini-t small{display:block;font-family:var(--geo);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-t b{display:block;font-family:var(--geo);font-weight:500;font-size:.88rem;letter-spacing:.02em;line-height:1.35;margin-top:.1rem}
html:is([lang="zh-CN"],[lang="ja"]) .mini-t small{font-size:.68rem;letter-spacing:.08em}
.cat-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.1rem;margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--line)}
.cat-entry{display:block;min-width:0;text-align:center}
.ce-img{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--stone)}
.ce-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease}
.cat-entry:hover .ce-img img{transform:scale(1.02)}   /* tiles are cropped to the exact 3:2 box (tools/make_tiles20.py): never zoom far enough to cut the product */
.cat-entry b{display:block;margin-top:.6rem;font-family:var(--geo);font-weight:500;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.45;color:var(--soft)}
html:is([lang="zh-CN"],[lang="ja"]) .cat-entry b{font-size:.78rem;letter-spacing:.08em;text-transform:none}
html[lang="fr"] .cat-entry b{letter-spacing:.06em}
.collection .view-all{margin-top:2.2rem}
.collection .view-all .btn{padding:.7rem 1.5rem;font-size:.68rem}

/* editorial sections */
.ed{display:grid;align-items:center;background:var(--bg);overflow:hidden}
#furniture,#craft{background:var(--paper)}
.ed-media{display:grid;gap:4px;min-width:0}
.ed-media figure{overflow:hidden;background:var(--stone);aspect-ratio:var(--ar,3/4)}
.ed-media img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.ed-media.single{--ar:3/2}
.ed-media.pair{grid-template-columns:1fr 1fr;--ar:3/4}
.ed-media.trio{grid-template-columns:repeat(3,1fr);--ar:4/5}
.ed-text{padding:clamp(2.2rem,5vw,5.5rem);max-width:34rem;justify-self:center}
.ed-text .eyebrow{margin-bottom:.9rem;font-size:.66rem}
.ed-text h2{font-size:clamp(1.45rem,1.1rem + 1.2vw,2.2rem);font-weight:300;line-height:1.25;margin-bottom:1rem;text-wrap:balance}
.ed-copy{font-size:.92rem;line-height:1.9;color:var(--soft);text-wrap:pretty}
html:is([lang="zh-CN"],[lang="ja"]) .ed-text .eyebrow{font-size:.74rem;letter-spacing:.3em}
html:is([lang="zh-CN"],[lang="ja"]) .ed-text h2{font-size:clamp(1.25rem,1rem + .8vw,1.7rem);letter-spacing:.14em;font-weight:300}
html:is([lang="zh-CN"],[lang="ja"]) .ed-copy{font-size:.86rem;line-height:2;letter-spacing:.05em}
html[lang="ja"] .ed-text h2,html[lang="ja"] .ed-copy{line-break:strict;word-break:auto-phrase}
.ed--left{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.ed--right{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.ed--right .ed-media{order:2}
.ed--wide{grid-template-columns:minmax(0,1fr)}
.ed--wide .ed-media.single{--ar:21/9}
.ed--wide .ed-text{text-align:center;max-width:40rem;padding:clamp(2.4rem,5vw,4.4rem) 1.4rem clamp(3rem,6vw,5.5rem)}
.ed--wide .ed-text h2{margin-bottom:.9rem}
.chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem .5rem;margin-top:1.5rem}
.chips li{border:1px solid var(--line);border-radius:999px;padding:.28rem .8rem;font-size:.72rem;letter-spacing:.04em;color:var(--soft);line-height:1.5}
html:is([lang="zh-CN"],[lang="ja"]) .chips li{font-size:.76rem}

@media (max-width:1000px){
  .mini-grid,.cat-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .intro{padding:3rem 0 2.4rem}
  html:is([lang="zh-CN"],[lang="ja"]) .intro{padding:2.8rem 0 2.2rem}
  .collection{padding-bottom:3rem}
  .collection .section-head{margin-bottom:1.3rem}
  .mini-grid{grid-template-columns:1fr 1fr;gap:.9rem .7rem}
  .mini:nth-child(n+5){display:none}
  .mini-t b{font-size:.82rem}
  .cat-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem .6rem;margin-top:1.8rem;padding-top:1.5rem}
  .cat-entry b{font-size:.58rem;letter-spacing:.1em}
  html:is([lang="zh-CN"],[lang="ja"]) .cat-entry b{font-size:.72rem}
  .ed--left,.ed--right{grid-template-columns:minmax(0,1fr)}
  .ed--right .ed-media{order:0}
  .ed-media.single,.ed--wide .ed-media.single{--ar:4/3}
  .ed-media.pair{--ar:3/4}
  .ed-media.trio{grid-template-columns:1fr 1fr;--ar:1/1}
  .ed-media.trio figure:first-child{grid-column:1/-1;aspect-ratio:16/10}
  .ed-text{padding:2.2rem 1.6rem 3rem;max-width:none}
  .ed--wide .ed-text{padding:2.2rem 1.6rem 3rem}
  .ed-text h2{font-size:1.45rem}
  .ed-copy{font-size:.88rem;line-height:1.85}
  html:is([lang="zh-CN"],[lang="ja"]) .ed-text h2{font-size:1.2rem}
  html:is([lang="zh-CN"],[lang="ja"]) .ed-copy{font-size:.84rem}
}
@media (max-width:760px){
  .about .why-grid{grid-template-columns:1fr 1fr}
  .about .why{padding:1.2rem .9rem 1.2rem 0}
  .about .why:nth-child(even){padding-left:.9rem}
  .about .why p{font-size:.8rem;line-height:1.7}
}

/* product pages: 'in the room' scenes from Jep's shoots — full-width bands under the gallery, never any text on top */
.pd-scenes{display:grid;gap:4px;margin-top:clamp(2.5rem,5vw,4.5rem)}
.pd-scenes figure{margin:0;overflow:hidden;background:var(--stone);aspect-ratio:16/9;max-height:92vh}
.pd-scenes img{display:block;width:100%;height:100%;object-fit:cover;cursor:zoom-in}
@media (max-width:760px){.pd-scenes{margin-top:2rem}.pd-scenes figure{aspect-ratio:4/3}}

/* mobile product grids (category pages, related): compact 2-column cards, ~4 products per phone screen; white-background studio shots */
@media (max-width:760px){
  .products,.related .products{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem .75rem}
  .pcard .p-body{padding-top:.55rem}
  .pcard .p-type{font-size:.54rem;letter-spacing:.14em;margin-bottom:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pcard .p-name{font-size:.92rem;letter-spacing:.04em;line-height:1.25}
  .pcard .p-mat,.pcard .p-more{display:none}
  .pcard .swatches{margin-top:.45rem;gap:.4rem}
  .pcard .sw{width:13px;height:13px;box-shadow:0 0 0 2px var(--bg)}
  .pcard .p-price{margin-top:.3rem;font-size:.74rem;line-height:1.35}
  html:is([lang="zh-CN"],[lang="ja"]) .pcard .p-type{font-size:.64rem;letter-spacing:.06em}
  .grp-h{margin-bottom:1rem}
}

/* ===== mobile hero (<=760px): whole photo in a square frame, controls in a strip BELOW the image (nothing on top of the picture); swipe to change slide, no arrows ===== */
.hero-cap[hidden]{display:none}
@media (max-width:760px){
  .hero-full{height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;color:var(--ink);background:var(--bg);padding-bottom:1.3rem;touch-action:pan-y}
  .hero-full .slides{position:relative;inset:auto;grid-column:1/-1;grid-row:1;width:100%;aspect-ratio:4/5;max-height:calc(100svh - 200px);touch-action:pan-y}
  .hero-shade,.hero-arrow{display:none}
  .hero-cap{position:static;grid-column:1;grid-row:2;padding:.9rem 0 .2rem 5%;text-align:left;color:var(--ink);text-shadow:none;gap:.15rem}
  .hero-cap b{font-size:.9rem;letter-spacing:.12em;color:var(--ink)}
  .hero-cap span{font-size:.54rem;letter-spacing:.18em;color:var(--soft);opacity:1}
  html:is([lang="zh-CN"],[lang="ja"]) .hero-cap span{letter-spacing:.1em}
  .hero-dots{position:static;transform:none;grid-column:2;grid-row:2;padding:.9rem 5% .2rem 0;gap:0;justify-self:end}
  .hero-dots button{width:13px;height:22px}
  .hero-dots button::after{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:rgba(26,23,20,.28)}
  .hero-dots button.on::after{width:16px;margin-left:-8px;background:var(--ink)}
  .hero-inner{position:static;grid-column:1/-1;grid-row:3;width:auto;max-width:none;margin:0;padding:.55rem 5% 0}
  .hero-inner .btn-white{background:var(--ink);color:#fff;border-color:var(--ink)}
  .hero-inner .btn-line-light{color:var(--ink);border-bottom:1px solid var(--ink)}
}

/* ===== v12: orientation-specific media (phones: natively portrait photos / videos; desktop: natively landscape hero + banners) ===== */
.ed-media.vp{display:flex;gap:4px;align-items:stretch}
.ed-media.vp figure{flex:var(--far,.75) 1 0;min-width:0;aspect-ratio:var(--far,.75)}
.ed-media figure.vid{background:#d9d4cb}
.ed-media figure.vid video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
@media (prefers-reduced-motion:reduce){.ed-media figure.vid video{display:none}.ed-media figure.vid{background:center/cover no-repeat}}
@media (max-width:760px){
  .ed-media.vp{flex-direction:column}
  .ed-media.vp figure{flex:none;width:100%}
  /* category banner on phones: portrait 3:4 photo, title BELOW the picture (nothing on top of it) */
  .banner{height:auto;display:block;background:var(--bg);color:var(--ink)}
  .banner picture{position:relative;display:block;aspect-ratio:3/4;max-height:68svh;overflow:hidden}
  .banner picture img{position:absolute;inset:0}
  .banner-shade{display:none}
  .banner-text{padding:1.3rem 0 .6rem}
  .banner-text .eyebrow.light{color:var(--soft)}
  .banner-text h1{color:var(--ink);font-size:clamp(1.7rem,7vw,2.2rem)}
}

/* ===== Price currency (js/geo.js + pages.js): minimal USD / EUR / AUD switcher, tax notes, no-flicker ===== */
.cur-pending [data-pr]{visibility:hidden;animation:curshow 0s linear 2s forwards}   /* hidden until the currency is known (js caps the wait at 1.5 s; CSS is a failsafe) */
@keyframes curshow{to{visibility:visible}}
[data-pr]{transition:opacity .25s}
.cursw{display:inline-flex;gap:.15rem;margin-left:auto;align-self:center}
.cursw button{background:none;border:0;border-bottom:1px solid transparent;cursor:pointer;color:var(--muted);font-family:var(--geo);font-size:.7rem;letter-spacing:.18em;line-height:1;padding:.45rem .55rem;transition:.2s}
.cursw button:hover{color:var(--ink)}
.cursw button.on{color:var(--ink);border-bottom-color:var(--ink)}
.pd-pnote{margin-top:.25rem;margin-bottom:.7rem;font-family:var(--geo);font-size:.7rem;letter-spacing:.06em;color:var(--muted)}
.price-note{font-family:var(--geo);font-size:.72rem;letter-spacing:.06em;color:var(--muted);margin-bottom:.4rem}
@media (max-width:760px){.cursw{margin-left:0;width:100%;justify-content:flex-end}.cursw button{padding:.4rem .5rem}}
/* Latin (en/fr): headings a touch smaller, body text tighter line spacing */
html:not([lang="zh-CN"]):not([lang="ja"]) h2{font-size:clamp(1.55rem,2.7vw,2.2rem)}
html:not([lang="zh-CN"]):not([lang="ja"]) .ed-text h2{font-size:clamp(1.25rem,1rem + 1vw,1.85rem)}
html:not([lang="zh-CN"]):not([lang="ja"]) .collection .section-head h2{font-size:clamp(1.1rem,.95rem + .8vw,1.45rem)}
html:not([lang="zh-CN"]):not([lang="ja"]) .banner-text h1{font-size:clamp(1.9rem,4.6vw,3.7rem)}
html:not([lang="zh-CN"]):not([lang="ja"]) .pd-info h1{font-size:clamp(1.85rem,3.4vw,2.7rem)}
html:not([lang="zh-CN"]):not([lang="ja"]) .band-title{font-size:clamp(1.6rem,3.7vw,3.2rem)}
html:not([lang="zh-CN"]):not([lang="ja"]) .split-text .big{font-size:clamp(2.5rem,5vw,4.7rem)}
html:not([lang="zh-CN"]):not([lang="ja"]) .intro-text{font-size:clamp(.95rem,.9rem + .45vw,1.18rem);line-height:1.55}
html:not([lang="zh-CN"]):not([lang="ja"]) body{line-height:1.55}
html:not([lang="zh-CN"]):not([lang="ja"]) :is(p,li,.ed-text p,.pd-info p){line-height:1.55}
@media (max-width:760px){html:not([lang="zh-CN"]):not([lang="ja"]) .banner-text h1{font-size:clamp(1.5rem,6vw,1.9rem)}}

/* white-background studio photos: the picture's backdrop is pure white and is multiplied onto the container, so it becomes exactly the page colour (no grey box).
   Containers carry no tint of their own; the related section (--paper) keeps its own colour through the same rule. */
.p-img,.mini-img,.pd-main,.pd-thumbs button{background:var(--bg)}   /* = page colour; explicit so thumbnails (opacity => own stacking group) still multiply onto it */
.related :is(.p-img,.mini-img){background:var(--paper)}
:is(.p-img,.mini-img,.pd-main,.pd-thumbs button) img:is([src*="views/"],[src*="catalog/"],[src*="white/"]){mix-blend-mode:multiply}

/* ===== hero v19: two independent slide sets (Jep, 29 Oct) - #trackD = native landscape photos for desktop, #trackM = native portrait photos + video for phones.  Always cover, never contain / blur / mat ===== */
.slide picture{position:absolute;inset:0;display:block}
.slide .bleed-img{object-fit:cover}
.slide video.hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;background:transparent;opacity:0;transition:opacity .4s}
.slide video.hv.on{opacity:1}
#trackM{display:none}
@media (max-width:760px){#trackD{display:none}#trackM{display:flex}}
@media (prefers-reduced-motion:reduce){.slide video.hv{display:none}}

/* ===== logo (Jep's official YO CIAO mark, traced to SVG) ===== */
.wordmark{display:inline-flex;align-items:center;line-height:0;letter-spacing:0}
.wordmark img{display:block;height:17px;width:auto}
@media (max-width:760px){.wordmark img{height:15px}}
.footer .wordmark img{height:19px}
.footer p.brand-line{font-family:"Jost","Futura","Century Gothic","Avenir Next","Helvetica Neue",Arial,sans-serif;font-weight:300;font-size:.74rem;letter-spacing:.06em;line-height:1.7;color:rgba(255,255,255,.55);max-width:27em;margin-top:1rem}
.footer p.brand-line + p{margin-top:.9rem}

/* ===== homepage tidy (29 Oct, Jep): no white slits between the photos of a collage (was a 4px gap showing the page colour); the media block sits flush, photos still cover their frames ===== */
.ed-media,.ed-media.vp{gap:0}
.ed-media figure{display:block}