*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:#37342f;font-family:"Noto Sans JP",sans-serif;font-weight:300;-webkit-font-smoothing:antialiased}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}img{display:block;width:100%;height:100%;object-fit:cover}figure{margin:0}.loader{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;background:#fff;transition:opacity .7s,visibility .7s}.loader.hide{opacity:0;visibility:hidden}.loader-mark{font-family:"Noto Sans JP",sans-serif;font-size:13px;letter-spacing:.38em}.header{position:fixed;z-index:100;top:0;left:0;width:100%;height:88px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;color:#2f2c28;transition:height .45s,background .45s,box-shadow .45s}.header.scrolled{height:70px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 1px rgba(40,35,30,.08)}.brand strong{display:block;font-family:"Noto Sans JP",sans-serif;font-weight:500;font-size:18px;letter-spacing:.12em}.brand span{display:block;margin-top:5px;font-size:7px;letter-spacing:.28em}.nav{display:flex;align-items:center;gap:26px;font-size:10px;letter-spacing:.14em}.nav-store{padding:11px 14px;border:1px solid currentColor}.menu-button{display:none;background:none;border:0;color:inherit}.hero{padding:88px 2.2vw 0;height:100svh;min-height:650px;display:flex;flex-direction:column}.hero-frame{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f7f7f7}.hero-frame img{object-fit:contain}.hero-bottom{height:58px;display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:.25em}.hero-bottom a{display:flex;align-items:center;gap:12px}.hero-bottom i{display:inline-block;width:54px;height:1px;background:currentColor;animation:scrollLine 2s ease-in-out infinite}@keyframes scrollLine{0%,100%{transform:scaleX(.35);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}}.statement{max-width:1320px;margin:auto;padding:165px 5vw 190px}.section-no,.product-copy>span,.craft-block>span{font-size:9px;letter-spacing:.28em}.statement-grid{margin-top:60px;display:grid;grid-template-columns:1.25fr .75fr;gap:12vw}.statement h1,.craft h2,.interlude h2{margin:0;font-family:"Noto Sans JP",sans-serif;font-weight:400;font-size:clamp(42px,5.6vw,78px);line-height:1.45;letter-spacing:.08em}.statement-copy{padding-top:14px;max-width:470px;font-size:14px;line-height:2.35;letter-spacing:.055em}.statement-copy .lead{font-family:"Noto Sans JP",sans-serif;font-size:19px;margin-top:0}.statement-copy p+p{margin-top:28px}.editorial{height:118vh;min-height:900px;position:relative;overflow:hidden;background:#f3f3f1}.ed-a,.ed-b{position:absolute;overflow:hidden;will-change:transform}.ed-a{left:5vw;top:10vh;width:40vw;height:78vh}.ed-b{right:5vw;bottom:8vh;width:34vw;height:62vh}.ed-word{position:absolute;left:43vw;top:12vh;font-family:"Noto Sans JP",sans-serif;font-size:clamp(80px,12vw,180px);letter-spacing:.02em;color:rgba(255,255,255,.62)}.ed-copy{position:absolute;left:48vw;top:43vh;z-index:2}.ed-copy small,.interlude-copy small,.store-panel small{font-size:9px;letter-spacing:.28em}.ed-copy p{font-family:"Noto Sans JP",sans-serif;font-size:21px;line-height:2;letter-spacing:.08em}.products{padding:160px 0 180px;background:#fff}.section-head{max-width:1280px;margin:0 auto 85px;padding:0 5vw;display:flex;align-items:end;justify-content:space-between}.section-head>div{display:flex;align-items:baseline;gap:25px}.section-head span{font-size:10px;letter-spacing:.2em}.section-head h2{margin:0;font-size:clamp(40px,5vw,66px);font-weight:300;letter-spacing:.16em}.section-head p{margin:0;font-family:"Noto Sans JP",sans-serif;font-size:14px;line-height:1.9;letter-spacing:.07em}.product-feature{max-width:1280px;margin:0 auto 180px;padding:0 5vw;display:grid;grid-template-columns:1.45fr .55fr;gap:8vw;align-items:center}.product-feature.cleaning{grid-template-columns:.55fr 1.45fr}.product-image{height:78vh;min-height:650px;overflow:hidden;will-change:transform}.product-copy h3{margin:24px 0 30px;font-family:"Noto Sans JP",sans-serif;font-size:clamp(44px,5vw,72px);font-weight:400;letter-spacing:.1em}.product-copy p{font-size:13px;line-height:2.2;letter-spacing:.055em}.product-copy a{display:inline-block;margin-top:38px;padding-bottom:7px;border-bottom:1px solid #7a756c;font-size:11px;letter-spacing:.08em}.product-copy b,.ig-actions b{font-weight:300;margin-left:15px}.use-grid{max-width:1180px;margin:-70px auto 190px;padding:0 5vw;display:grid;grid-template-columns:1fr .72fr 1fr;gap:3vw;align-items:start}.use-grid figure{overflow:hidden}.use-a{height:54vh}.use-b{height:42vh;margin-top:18vh}.use-c{height:58vh;margin-top:6vh}.craft{display:grid;grid-template-columns:56% 44%;min-height:240vh;background:#f7f7f5}.craft-sticky{position:sticky;top:0;height:100vh;overflow:hidden}.craft-sticky img{object-position:center}.craft-copy{padding:18vh 8vw 18vh 7vw}.craft-block{min-height:68vh;display:flex;flex-direction:column;justify-content:center}.craft-block h2{margin:28px 0 36px;font-size:clamp(40px,4.6vw,66px)}.craft-block h3{margin:28px 0 32px;font-family:"Noto Sans JP",sans-serif;font-weight:400;font-size:clamp(30px,3.4vw,49px);line-height:1.55;letter-spacing:.07em}.craft-block p{font-size:13px;line-height:2.3;letter-spacing:.055em}.interlude{height:95vh;min-height:720px;position:relative;overflow:hidden;background:#222;color:#fff}.interlude-image{position:absolute;inset:-7%;will-change:transform}.interlude:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,20,16,.5),rgba(25,20,16,.05))}.interlude-copy{position:absolute;z-index:2;left:7vw;bottom:11vh}.interlude h2{margin-top:25px;font-size:clamp(36px,4.5vw,62px)}.instagram{padding:140px 0 115px;background:#5c5b58;color:#fff}.instagram .section-head{margin-bottom:50px}.ig-feed{max-width:1200px;margin:auto;padding:0 5vw}.lightwidget-widget{width:100%;border:0;overflow:hidden}.ig-actions{max-width:1200px;margin:36px auto 0;padding:0 5vw;display:flex;flex-direction:column;align-items:center}.outline-button{width:570px;max-width:100%;padding:19px 24px;border:1px solid rgba(255,255,255,.85);text-align:center;font-size:13px;letter-spacing:.07em;transition:.3s}.outline-button:hover{background:#fff;color:#5c5b58}.text-link{margin-top:23px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.6);font-size:11px;letter-spacing:.07em}.store-cta{display:grid;grid-template-columns:1fr 1fr;min-height:78vh;background:#2d2a27;color:#fff}.store-photo{min-height:650px}.store-panel{padding:9vw;display:flex;flex-direction:column;justify-content:center;transition:background .35s}.store-panel:hover{background:#38342f}.store-panel h2{margin:30px 0 70px;font-family:"Noto Sans JP",sans-serif;font-size:clamp(38px,4.5vw,62px);font-weight:400;line-height:1.5;letter-spacing:.08em}.store-panel>span{font-size:11px;letter-spacing:.18em}.footer{position:relative;padding:75px 5vw 45px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:6vw;background:#201e1c;color:#d8d4cc;font-size:10px;line-height:1.9;letter-spacing:.06em}.footer-brand strong{display:block;font-family:"Noto Sans JP",sans-serif;font-size:18px;letter-spacing:.12em}.footer-brand span{font-size:7px;letter-spacing:.26em}.footer-links{display:flex;flex-direction:column;gap:8px}.copyright{position:absolute;right:5vw;bottom:24px;font-size:7px;letter-spacing:.2em}.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}.reveal.is-visible{opacity:1;transform:none}.motion-img{transition:transform .08s linear}.motion-img img{transform:scale(1.045)}
@media(max-width:820px){.header{height:68px;padding:0 20px}.header.scrolled{height:62px}.brand strong{font-size:14px}.brand span{font-size:6px}.menu-button{display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:.18em}.menu-button i{width:18px;height:1px;background:currentColor;position:relative}.menu-button i:after{content:"";position:absolute;left:0;top:5px;width:18px;height:1px;background:currentColor}.nav{position:fixed;inset:0;z-index:-1;padding:120px 30px 50px;background:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:26px;font-family:"Noto Sans JP",sans-serif;font-size:24px;opacity:0;visibility:hidden;transition:.35s}.menu-open .nav{opacity:1;visibility:visible}.nav-store{font-family:"Noto Sans JP",sans-serif;font-size:11px}.hero{padding:68px 0 0;height:auto;min-height:0}.hero-frame{height:auto;flex:none;background:#f7f7f7}.hero-frame img{height:auto;object-fit:contain}.hero-bottom{height:50px;padding:0 18px}.statement{padding:105px 24px 125px}.statement-grid{margin-top:38px;grid-template-columns:1fr;gap:45px}.statement h1{font-size:39px}.statement-copy{font-size:13px}.editorial{height:1000px;min-height:0}.ed-a{left:0;top:5%;width:75vw;height:52vh}.ed-b{right:0;bottom:5%;width:70vw;height:50vh}.ed-word{left:8vw;top:46%;font-size:58px}.ed-copy{left:8vw;top:55%;width:82vw}.ed-copy p{font-size:15px}.products{padding:100px 0 110px}.section-head{margin-bottom:55px;padding:0 24px;display:block}.section-head>div{gap:16px}.section-head h2{font-size:38px}.section-head p{margin-top:20px}.product-feature,.product-feature.cleaning{margin-bottom:110px;padding:0 24px;grid-template-columns:1fr;gap:45px}.product-feature.cleaning .product-copy{order:2}.product-image{height:68vh;min-height:520px}.product-copy h3{font-size:45px}.use-grid{margin:-40px auto 120px;padding:0 14px;grid-template-columns:1fr 1fr;gap:12px}.use-a{height:48vh}.use-b{height:37vh;margin-top:12vh}.use-c{display:none}.craft{display:block;min-height:0}.craft-sticky{position:relative;height:78vh}.craft-copy{padding:70px 24px 100px}.craft-block{min-height:0;padding:60px 0}.craft-block h2{font-size:39px}.craft-block h3{font-size:31px}.interlude{height:75vh;min-height:570px}.interlude-copy{left:24px;bottom:65px}.interlude h2{font-size:34px}.instagram{padding:90px 0 80px}.ig-feed,.ig-actions{padding:0 16px}.outline-button{font-size:11px;padding:17px 10px}.store-cta{grid-template-columns:1fr;min-height:0}.store-photo{height:65vh;min-height:500px}.store-panel{padding:90px 24px}.store-panel h2{margin-bottom:50px}.footer{padding:65px 24px 55px;grid-template-columns:1fr;gap:35px}.copyright{position:static;margin-top:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.loader{display:none}.reveal{opacity:1;transform:none;transition:none}.motion-img{transform:none!important}.hero-bottom i{animation:none}}
.brand{width:clamp(220px,25vw,410px);height:54px;display:flex;align-items:center}.brand img{width:100%;height:auto;object-fit:contain;object-position:left center}.header.scrolled .brand{width:clamp(190px,22vw,340px)}
.category{max-width:1440px;margin:0 auto 190px;padding:0 5vw}.category-hero{width:100%;aspect-ratio:2.5/1;overflow:hidden;background:#fafafa}.category-hero img{object-fit:cover}.category-info{display:grid;grid-template-columns:1.05fr .75fr;gap:10vw;padding:62px 3vw 90px}.category-title>span{font-size:9px;letter-spacing:.28em}.category-title h3{margin:20px 0 7px;font-family:"Noto Sans JP",sans-serif;font-size:clamp(38px,4.6vw,64px);font-weight:400;letter-spacing:.08em}.category-en{margin:0;font-size:9px;letter-spacing:.24em;color:#817b71}.category-text{padding-top:26px;font-size:13px;line-height:2.25;letter-spacing:.055em}.category-text p{margin-top:0}.category-text a{display:inline-block;margin-top:28px;padding-bottom:7px;border-bottom:1px solid #777168;font-size:11px;letter-spacing:.08em}.category-text b{font-weight:300;margin-left:14px}.category-scenes{position:relative;min-height:88vh}.body-scenes .scene-large{width:59%;height:78vh;margin-left:auto;overflow:hidden}.scene-note{position:absolute;left:6%;top:22%;z-index:2}.scene-note small{font-size:9px;letter-spacing:.27em}.scene-note p{font-family:"Noto Sans JP",sans-serif;font-size:clamp(24px,2.7vw,38px);line-height:1.8;letter-spacing:.08em}.kitchen-scenes{position:relative;min-height:105vh}.ks-main{position:absolute;left:0;top:0;width:56%;height:83vh;overflow:hidden}.ks-sub{position:absolute;right:0;top:13vh;width:30%;height:47vh;overflow:hidden}.ks-sub2{position:absolute;right:10%;bottom:0;width:25%;height:34vh;overflow:hidden}.cleaning-scenes{display:grid;grid-template-columns:1.2fr .8fr;gap:5vw;align-items:start}.cs-a{height:80vh;overflow:hidden}.cs-b{height:56vh;margin-top:18vh;overflow:hidden}.other-category{margin-bottom:80px}.other-inner{display:grid;grid-template-columns:.65fr .55fr 1fr;gap:6vw;align-items:center;padding:95px 0;border-top:1px solid #d7d2c8}.other-photo{height:64vh;overflow:hidden}
@media(max-width:820px){.brand{width:205px;height:42px}.header.scrolled .brand{width:180px}.category{margin-bottom:110px;padding:0}.category-hero{aspect-ratio:2.1/1}.category-info{grid-template-columns:1fr;gap:25px;padding:38px 24px 60px}.category-title h3{font-size:37px}.category-text{padding-top:0}.category-scenes{min-height:0}.body-scenes .scene-large{width:82%;height:64vh}.scene-note{left:24px;top:12%}.scene-note p{font-size:22px;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.28)}.kitchen-scenes{min-height:820px}.ks-main{width:78%;height:58vh}.ks-sub{right:0;top:47vh;width:53%;height:40vh}.ks-sub2{display:none}.cleaning-scenes{grid-template-columns:1fr;gap:14px;padding:0 14px}.cs-a{height:65vh}.cs-b{width:65%;height:43vh;margin:0 0 0 auto}.other-category{padding:0 24px}.other-inner{grid-template-columns:1fr;gap:28px;padding:70px 0}.other-photo{height:60vh}}
/* white palette final */
body,.statement,.products{background:#fff}
.loader{background:#fff}
.header.scrolled{background:rgba(255,255,255,.94);box-shadow:0 1px 0 rgba(30,28,25,.08)}
.hero-frame{background:#fff}
.hero-bottom{border-bottom:1px solid #e7e5e1}
.category-info{border-bottom:1px solid #e7e5e1}
.category-hero{background:#fafafa}
.craft{background:#f6f6f4}
@media(max-width:820px){.nav{background:#fff}.category-info{border-bottom:0}}
/* v4 accumulated revisions */
.keep-line{white-space:nowrap}
/* Kitchen — varied editorial gallery */
.kitchen-gallery{
display:grid;
grid-template-columns:repeat(12,1fr);
grid-auto-rows:6.3vw;
gap:2.2vw;
min-height:0;
}
.kitchen-gallery .kg{position:relative;overflow:hidden}
.kg-hero{grid-column:1/7;grid-row:1/10}
.kg-pumpkin{grid-column:8/13;grid-row:2/8}
.kg-board{grid-column:2/6;grid-row:11/18}
.kg-glass{grid-column:7/11;grid-row:10/17}
.kg-root{grid-column:10/13;grid-row:15/21}
.kg-thermos{grid-column:1/5;grid-row:19/26}
.kg-pan{grid-column:5/10;grid-row:19/27}
.kg-bottle{grid-column:10/13;grid-row:22/28}
.kg-tray{grid-column:3/8;grid-row:28/35}
/* Cleaning — lifestyle-led gallery */
.cleaning-gallery{
display:grid;
grid-template-columns:repeat(12,1fr);
grid-auto-rows:6.2vw;
gap:2.2vw;
align-items:stretch;
}
.cleaning-gallery .cg{margin:0;overflow:hidden}
.cg-main{grid-column:1/8;grid-row:1/11}
.cg-detail{grid-column:9/13;grid-row:2/8}
.cg-table{grid-column:8/12;grid-row:10/17}
.cg-person{grid-column:1/5;grid-row:13/22}
.cg-black{grid-column:5/9;grid-row:17/25}
.cg-stairs{grid-column:7/13;grid-row:26/35}
@media(max-width:1050px){
.statement h1{font-size:clamp(38px,5vw,58px)}
.craft-block h3{font-size:clamp(28px,3vw,40px)}
}
@media(max-width:820px){
.keep-line{white-space:normal}
.statement h1 .keep-line{white-space:nowrap}
.kitchen-gallery,.cleaning-gallery{
display:grid;
grid-template-columns:1fr 1fr;
grid-auto-rows:auto;
gap:12px;
padding:0 14px;
}
.kitchen-gallery .kg,.cleaning-gallery .cg{grid-column:auto;grid-row:auto;height:44vh}
.kitchen-gallery .kg-hero,.cleaning-gallery .cg-main,.cleaning-gallery .cg-stairs{
grid-column:1/-1;height:62vh
}
.kitchen-gallery .kg-root,.kitchen-gallery .kg-bottle{height:38vh}
.craft-block h3 .keep-line{white-space:normal}
}
/* v5 revisions — 2026-09-15 */
.body-wood{position:absolute;left:5%;bottom:2%;width:27%;height:43vh;overflow:hidden;z-index:1}
.body-wood img{object-position:center 58%}
/* Show the broom + dustpan composition more fully instead of a narrow crop. */
.cg-main{grid-column:1/10;grid-row:1/11;background:#f7f6f2}
.cg-main img{object-fit:contain;object-position:center center;transform:none}
.cg-detail{grid-column:10/13;grid-row:2/8}
.cg-table{grid-column:8/12;grid-row:11/18}
.cg-person{grid-column:1/5;grid-row:13/22}
.cg-black{grid-column:5/10;grid-row:18/26;background:#f7f6f2}
.cg-black img{object-fit:contain;object-position:center center}
.cg-stairs{grid-column:7/13;grid-row:27/36}
/* Craft image: preserve the supplied portrait composition. */
.craft-sticky img{object-fit:cover;object-position:center center}
@media(max-width:820px){
.body-scenes{padding-bottom:45vh}
.body-wood{left:14px;bottom:0;width:56%;height:42vh}
.cleaning-gallery .cg-main,.cleaning-gallery .cg-black{background:#f7f6f2}
.cleaning-gallery .cg-main img,.cleaning-gallery .cg-black img{object-fit:contain}
}
/* v6 — editorial galleries: preserve each product / tool composition */
.category-hero img{object-fit:contain;background:#fafafa}
#bath .category-hero{aspect-ratio:2.45/1;background:#f5f5f5}
#bath .category-hero img{object-fit:cover;object-position:center 42%}
/* The galleries intentionally mix landscape and portrait frames.
Priority: show the complete product/tool rather than force a uniform crop. */
.kitchen-gallery,.cleaning-gallery{align-items:start}
.kitchen-gallery .kg,.cleaning-gallery .cg{background:#f8f7f4}
.kitchen-gallery img,.cleaning-gallery img{object-fit:contain;object-position:center;transform:none!important}
/* Kitchen: landscape anchors + portrait accents */
.kg-hero{grid-column:1/8;grid-row:1/9}
.kg-pumpkin{grid-column:9/13;grid-row:1/8}
.kg-board{grid-column:1/5;grid-row:10/17}
.kg-glass{grid-column:6/10;grid-row:9/16}
.kg-root{grid-column:10/13;grid-row:10/17}
.kg-thermos{grid-column:1/5;grid-row:18/26}
.kg-pan{grid-column:5/11;grid-row:18/26}
.kg-bottle{grid-column:11/13;grid-row:18/25}
.kg-tray{grid-column:4/10;grid-row:27/34}
/* Cleaning: wider main compositions so broom + dustpan remain fully visible. */
.cg-main{grid-column:1/9;grid-row:1/10}
.cg-detail{grid-column:10/13;grid-row:1/8}
.cg-table{grid-column:9/13;grid-row:10/17}
.cg-person{grid-column:1/5;grid-row:12/21}
.cg-black{grid-column:5/10;grid-row:18/26}
.cg-stairs{grid-column:7/13;grid-row:27/35}
/* body secondary photos also retain the product shape */
.body-wood img{object-fit:contain;background:#f8f7f4}
@media(max-width:820px){
#bath .category-hero{aspect-ratio:1.45/1}
#bath .category-hero img{object-fit:cover;object-position:center 40%}
.kitchen-gallery .kg,.cleaning-gallery .cg{height:auto;min-height:0;aspect-ratio:auto;background:#f8f7f4}
.kitchen-gallery .kg img,.cleaning-gallery .cg img{width:100%;height:auto;object-fit:contain}
.kitchen-gallery .kg-hero,.cleaning-gallery .cg-main,.cleaning-gallery .cg-stairs{height:auto}
.body-wood{height:auto;aspect-ratio:3/4}.body-wood img{height:100%;object-fit:contain}
}
/* v7 — tighter editorial rhythm, 2026-09-15
Reduce empty gaps and connect image sequences while preserving complete products. */
.category{margin-bottom:105px;padding-left:3vw;padding-right:3vw}
.category-info{gap:7vw;padding:46px 2vw 52px}
.category-text a{margin-top:18px}
.category-scenes{min-height:0}
/* BODY: apple image removed. Let the remaining body brush image carry the section. */
.body-scenes{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(230px,.55fr);align-items:center;gap:3vw;padding:0 2vw 18px}
.body-wood{position:relative;left:auto;bottom:auto;width:100%;height:auto;overflow:visible}
.body-wood img{display:block;width:100%;height:auto;object-fit:contain;background:transparent}
.scene-note{position:relative;left:auto;top:auto;padding:0 2vw}
/* KITCHEN: two wooden-handled brushes image removed; rebuild into a denser mosaic. */
.kitchen-gallery,.cleaning-gallery{gap:1.05vw;grid-auto-rows:5.35vw}
.kg-pumpkin{grid-column:1/6;grid-row:1/8}
.kg-board{grid-column:6/10;grid-row:1/8}
.kg-glass{grid-column:10/13;grid-row:1/8}
.kg-root{grid-column:1/4;grid-row:9/16}
.kg-thermos{grid-column:4/8;grid-row:9/16}
.kg-pan{grid-column:8/13;grid-row:9/17}
.kg-bottle{grid-column:1/5;grid-row:17/24}
.kg-tray{grid-column:5/11;grid-row:18/25}
/* CLEANING: reduce the large islands of whitespace between compositions. */
.cg-main{grid-column:1/9;grid-row:1/10}
.cg-detail{grid-column:9/13;grid-row:1/8}
.cg-table{grid-column:9/13;grid-row:8/15}
.cg-person{grid-column:1/5;grid-row:11/20}
.cg-black{grid-column:5/10;grid-row:11/19}
.cg-stairs{grid-column:7/13;grid-row:20/29}
.other-inner{gap:3.5vw;padding:70px 0}
.other-category{margin-bottom:55px}
.craft{margin-top:0}
@media(max-width:820px){
.category{margin-bottom:72px}
.category-info{padding:32px 20px 38px}
.body-scenes{grid-template-columns:1fr;gap:22px;padding:0 14px 10px}
.body-wood{width:78%;margin-left:auto}
.scene-note{padding:0 10px}
.kitchen-gallery,.cleaning-gallery{gap:7px;padding:0 8px}
.kitchen-gallery .kg,.cleaning-gallery .cg{height:auto;min-height:0}
.other-inner{padding:50px 0}
}
/* v8 — slow scroll gallery
One photograph at a time. No collage, no overlap, no forced crop. */
.kitchen-gallery,
.cleaning-gallery{
display:flex;
flex-direction:column;
grid-template-columns:none;
grid-auto-rows:auto;
gap:clamp(70px,9vw,150px);
padding:18px 4vw 70px;
overflow:visible;
}
.kitchen-gallery .kg,
.cleaning-gallery .cg{
position:relative;
display:block;
width:min(76vw,1080px);
height:auto;
min-height:0;
margin:0;
grid-column:auto!important;
grid-row:auto!important;
overflow:visible;
background:transparent;
}
.kitchen-gallery .kg img,
.cleaning-gallery .cg img{
display:block;
width:100%;
height:auto;
max-height:none;
object-fit:contain;
object-position:center;
background:transparent;
transform:none!important;
}
/* A quiet editorial rhythm: large anchors with smaller portrait accents. */
.kitchen-gallery .kg:nth-child(3n+1),
.cleaning-gallery .cg:nth-child(3n+1){align-self:flex-start;width:min(78vw,1120px)}
.kitchen-gallery .kg:nth-child(3n+2),
.cleaning-gallery .cg:nth-child(3n+2){align-self:flex-end;width:min(60vw,820px)}
.kitchen-gallery .kg:nth-child(3n),
.cleaning-gallery .cg:nth-child(3n){align-self:center;width:min(68vw,940px)}
/* Give especially important cleaning compositions enough width to show the whole tool. */
.cleaning-gallery .cg-main,
.cleaning-gallery .cg-black,
.cleaning-gallery .cg-stairs{width:min(80vw,1160px)}
/* The section ends shortly after the final image, so the next chapter feels connected. */
#kitchen.category,#cleaning.category{margin-bottom:72px}
#cleaning .cleaning-gallery{padding-bottom:28px}
@media(max-width:820px){
.kitchen-gallery,
.cleaning-gallery{
display:flex;
gap:54px;
padding:8px 14px 42px;
}
.kitchen-gallery .kg,
.cleaning-gallery .cg,
.kitchen-gallery .kg:nth-child(n),
.cleaning-gallery .cg:nth-child(n){
align-self:auto;
width:100%;
height:auto;
margin:0;
}
.kitchen-gallery .kg:nth-child(even),
.cleaning-gallery .cg:nth-child(even){width:88%;align-self:flex-end}
.kitchen-gallery .kg:nth-child(3n),
.cleaning-gallery .cg:nth-child(3n){width:92%;align-self:flex-start}
.cleaning-gallery .cg-main,
.cleaning-gallery .cg-black,
.cleaning-gallery .cg-stairs{width:100%}
#kitchen.category,#cleaning.category{margin-bottom:54px}
#cleaning .cleaning-gallery{padding-bottom:18px}
}
/* v9: scroll-linked CRAFT image crossfade */
.craft-sticky{background:#f2f0eb}
.craft-sticky .craft-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;will-change:opacity,transform}
.craft-sticky .craft-image-base{z-index:1;opacity:1}
.craft-sticky .craft-image-fade{z-index:2;opacity:0;transform:scale(1.025)}
@media(max-width:820px){
.craft-sticky .craft-image-fade{opacity:0}
}
@media(prefers-reduced-motion:reduce){
.craft-sticky .craft-image-fade{transform:none}
}
/* v10 — scroll story galleries */
.story-scroll{max-width:1320px;margin:0 auto 150px;padding:0 5vw;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(320px,.72fr);gap:7vw;align-items:start;position:relative}
.story-visual{position:sticky;top:11vh;height:78vh;min-height:620px;overflow:hidden;background:#f4f2ed}
.story-image{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.025);transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform 1.2s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.story-image.is-active{opacity:1;transform:scale(1);z-index:2}
.story-image img{width:100%;height:100%;object-fit:contain;object-position:center;background:#f4f2ed}
.story-copy{position:relative}
.story-step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding:10vh 0;opacity:.28;transform:translateY(18px);transition:opacity .5s,transform .5s}
.story-step.is-active{opacity:1;transform:none}
.story-step small{font-size:9px;letter-spacing:.28em;color:#817b71}
.story-step h4{margin:22px 0 28px;font-family:"Noto Sans JP",sans-serif;font-size:clamp(30px,3.1vw,47px);font-weight:400;line-height:1.55;letter-spacing:.07em}
.story-step p{max-width:420px;margin:0;font-size:13px;line-height:2.25;letter-spacing:.055em}
#body .story-scroll{margin-top:0}
#kitchen .story-visual{background:#f1eee8}
#cleaning .story-visual{background:#f3f1ec}
#cleaning .story-scroll{margin-bottom:70px}
@media(max-width:820px){
.story-scroll{display:block;margin-bottom:90px;padding:0}
.story-visual{top:62px;height:57vh;min-height:390px;z-index:3}
.story-copy{padding:0 24px;background:#fff;position:relative;z-index:4}
.story-step{min-height:62vh;padding:16vh 0 12vh}
.story-step h4{font-size:31px;margin:18px 0 22px}
.story-step p{font-size:12px;line-height:2.15}
#cleaning .story-scroll{margin-bottom:35px}
}
@media(prefers-reduced-motion:reduce){.story-image,.story-step{transition:none}.story-image{transform:none}}
/* v11 — readability + deliberate line breaks */
.category-text{font-size:16px;line-height:2.05;letter-spacing:.045em}
.category-text a{font-size:14px}
.story-step small{font-size:11px;letter-spacing:.24em}
.story-step h4{line-height:1.62;word-break:keep-all;overflow-wrap:normal}
.story-step p{max-width:460px;font-size:16px;line-height:2.05;letter-spacing:.045em}
#cleaning .story-image:nth-child(5) img{object-fit:cover;object-position:48% 55%;background:#f3f1ec}
@media(max-width:820px){
.category-text{font-size:16px;line-height:2}
.category-text a{font-size:14px}
.story-step small{font-size:11px}
.story-step h4{font-size:31px;line-height:1.62;word-break:keep-all}
.story-step p{font-size:16px;line-height:2}
#cleaning .story-image:nth-child(5) img{object-fit:cover;object-position:46% 55%}
}
/* v14 — loading mark: TAKADA / tawashi pictogram / TAWASHI */
.loader-mark{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;font-family:"Noto Sans JP",sans-serif;line-height:1}
.loader-word{font-size:13px;font-weight:400;letter-spacing:.38em;padding-left:.38em;color:#111}
.loader-icon{width:46px;height:58px;object-fit:contain;display:block;filter:none;mix-blend-mode:normal}
@media(max-width:820px){.loader-mark{gap:8px}.loader-word{font-size:12px}.loader-icon{width:42px;height:53px}}
/* v17 — mobile scrollytelling: translucent copy over visible photography */
@media(max-width:820px){
.story-scroll{position:relative;background:#f3f1ec}
.story-visual{position:sticky;top:62px;height:calc(100svh - 62px);min-height:520px;z-index:2;background:#f3f1ec}
.story-image img{object-fit:cover;background:#f3f1ec}
.story-copy{position:relative;z-index:4;padding:0;background:transparent}
.story-step{box-sizing:border-box;min-height:82svh;padding:0 24px;justify-content:center;opacity:.42;transform:none;transition:opacity .45s}
.story-step::before{content:"";position:absolute;left:0;right:0;top:50%;height:58%;transform:translateY(-50%);z-index:-1;background:linear-gradient(to bottom,rgba(248,246,241,0),rgba(248,246,241,.68) 16%,rgba(248,246,241,.76) 50%,rgba(248,246,241,.68) 84%,rgba(248,246,241,0));backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);opacity:0;transition:opacity .45s}
.story-step.is-active{opacity:1}
.story-step.is-active::before{opacity:1}
.story-step small,.story-step h4,.story-step p{position:relative;z-index:1;text-shadow:0 1px 12px rgba(248,246,241,.9)}
.story-step small{color:#5f5a52}
.story-step h4{font-size:30px;line-height:1.58;margin:18px 0 20px}
.story-step p{font-size:16px;line-height:1.95;max-width:92%;color:#3e3a35}
#body .story-visual::after,#kitchen .story-visual::after,#cleaning .story-visual::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(to bottom,rgba(246,243,237,.05),rgba(246,243,237,.12));}
#cleaning .story-scroll{margin-bottom:35px}
}
/* v18 — mobile copy readability: compact milky glass panel */
@media(max-width:820px){
.story-step{position:relative;padding:0 20px;align-items:stretch}
.story-step::before{display:none}
.story-step small,.story-step h4,.story-step p{
width:calc(100% - 8px);
max-width:none;
margin-left:auto;
margin-right:auto;
padding-left:20px;
padding-right:20px;
background:rgba(250,248,244,.82);
-webkit-backdrop-filter:blur(7px);
backdrop-filter:blur(7px);
text-shadow:none;
}
.story-step small{
padding-top:22px;
padding-bottom:0;
}
.story-step h4{
box-sizing:border-box;
margin-top:0;
margin-bottom:0;
padding-top:16px;
padding-bottom:17px;
}
.story-step p{
box-sizing:border-box;
margin-top:0;
margin-bottom:0;
padding-top:0;
padding-bottom:24px;
}
.story-step:not(.is-active) small,
.story-step:not(.is-active) h4,
.story-step:not(.is-active) p{background:rgba(250,248,244,.58)}
}
/* v19 — mobile glass panel: centered copy + overflow-safe sizing */
@media(max-width:820px){
.story-step{
padding-left:18px;
padding-right:18px;
align-items:center;
text-align:center;
}
.story-step small,
.story-step h4,
.story-step p{
box-sizing:border-box;
width:100%;
max-width:560px;
margin-left:auto;
margin-right:auto;
padding-left:18px;
padding-right:18px;
text-align:center;
}
.story-step h4{
font-size:clamp(26px,7.6vw,31px);
line-height:1.62;
letter-spacing:.055em;
word-break:keep-all;
overflow-wrap:normal;
}
.story-step p{
max-width:560px;
font-size:16px;
line-height:2;
letter-spacing:.035em;
overflow-wrap:anywhere;
}
.story-step small{
font-size:11px;
line-height:1.6;
}
}
@media(max-width:390px){
.story-step{padding-left:14px;padding-right:14px}
.story-step small,.story-step h4,.story-step p{padding-left:16px;padding-right:16px}
.story-step h4{font-size:26px;letter-spacing:.035em}
.story-step p{font-size:15px}
}
/* v20 — mobile typography + smoother bidirectional story transitions */
@media(max-width:820px){
.story-step h4{
font-size:clamp(24px,6.8vw,28px);
line-height:1.58;
letter-spacing:.04em;
}
.story-step p{
font-size:15px;
line-height:1.95;
}
.story-image{
transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform 1.15s cubic-bezier(.22,.61,.36,1);
}
.story-step{transition:opacity .55s cubic-bezier(.22,.61,.36,1)}
}
@media(max-width:390px){
.story-step h4{font-size:23px;line-height:1.56;letter-spacing:.025em}
.story-step p{font-size:14px;line-height:1.9}
}
/* v22 — mobile SHURO readability + last-story photo hold */
@media(max-width:820px){
/* SHURO / NATURAL MATERIAL: do not overlap copy and photography on mobile */
.editorial{
height:auto;
min-height:0;
padding:86px 0 0;
display:flex;
flex-direction:column;
overflow:hidden;
background:#f5f4f1;
}
.editorial .ed-word{
position:relative;
order:1;
left:auto;top:auto;
margin:0 24px 30px;
font-size:58px;
line-height:1;
color:rgba(62,58,53,.10);
}
.editorial .ed-copy{
position:relative;
order:2;
left:auto;top:auto;
width:auto;
margin:0;
padding:0 24px 48px;
z-index:4;
background:#f5f4f1;
}
.editorial .ed-copy small{font-size:11px;letter-spacing:.24em;color:#6f6a62}
.editorial .ed-copy p{
margin:26px 0 0;
font-size:22px;
line-height:2;
letter-spacing:.06em;
color:#37342f;
}
.editorial .ed-a{
position:relative;
order:3;
left:auto;top:auto;
width:100%;height:68svh;
min-height:520px;
transform:none!important;
}
.editorial .ed-a img{object-fit:cover;object-position:center 55%}
.editorial .ed-b{display:none}
/* Give the final story frame enough scroll distance to reveal the photo alone. */
.story-step:last-child{
min-height:158svh;
padding-top:12svh;
padding-bottom:70svh;
}
.story-step:last-child small,
.story-step:last-child h4,
.story-step:last-child p{
transition:opacity .12s linear,background-color .12s linear,backdrop-filter .12s linear;
opacity:var(--last-copy-opacity,1);
}
}
@media(prefers-reduced-motion:reduce) and (max-width:820px){
.story-step:last-child small,.story-step:last-child h4,.story-step:last-child p{opacity:1!important}
}
/* v23 — longer reading hold before final caption fades */
@media(max-width:820px){
.story-step:last-child{min-height:158svh;padding-top:12svh;padding-bottom:70svh}
}
/* v24 — mobile category entry: first image and first caption arrive together */
@media(max-width:820px){
/* Pull the copy track up over the sticky visual from the very first frame.
This removes the image-only lead-in between product categories. */
[data-story] .story-copy{
margin-top:calc(-1 * (100svh - 62px));
}
[data-story] .story-step:first-child{
opacity:1;
}
[data-story] .story-step:first-child small,
[data-story] .story-step:first-child h4,
[data-story] .story-step:first-child p{
transition:opacity .55s cubic-bezier(.22,.61,.36,1), background-color .55s cubic-bezier(.22,.61,.36,1), backdrop-filter .55s cubic-bezier(.22,.61,.36,1);
}
}
/* v25: workshop film + original-site type direction */
.statement-media{max-width:1320px;margin:95px auto 0;aspect-ratio:16/7;overflow:hidden;background:#eceae6}
.statement-video,.statement-poster{width:100%;height:100%;object-fit:cover;display:block}
.statement-poster{display:none}
@media(max-width:820px){
.statement-media{margin:62px -24px -15px;aspect-ratio:4/3}
.statement-video{display:none}
.statement-poster{display:block}
}
/* v26: workshop film integrated with ABOUT copy */
@media(min-width:821px){
.statement{padding-bottom:175px}
.statement-grid{
grid-template-columns:minmax(0,.92fr) minmax(420px,.78fr);
grid-template-areas:"title film" "copy film";
column-gap:8vw;
row-gap:58px;
align-items:start;
}
.statement-grid>h1{grid-area:title;align-self:end}
.statement-copy{grid-area:copy;padding-top:0;max-width:520px}
.statement-media{
grid-area:film;
width:100%;
max-width:none;
margin:0;
aspect-ratio:4/5;
min-height:650px;
align-self:stretch;
overflow:hidden;
background:#eceae6;
}
.statement-video{object-position:center center}
}
@media(max-width:820px){
.statement-media{margin:8px 0 0;aspect-ratio:4/3;width:100%}
}
/* v27 — mobile CRAFT uses the same sticky visual / readable panel rhythm as product stories */
@media(max-width:820px){
.craft{display:block;position:relative;min-height:0;background:#f3f1ec}
.craft-sticky{position:sticky;top:62px;height:calc(100svh - 62px);min-height:520px;z-index:2;overflow:hidden;background:#f3f1ec}
.craft-sticky .craft-image{transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform 1.15s cubic-bezier(.22,.61,.36,1)}
.craft-sticky .craft-image-base{opacity:1;transform:scale(1)}
.craft-sticky .craft-image-fade{opacity:0;transform:scale(1.025)}
.craft.craft-second-active .craft-image-base{opacity:0;transform:scale(1.015)}
.craft.craft-second-active .craft-image-fade{opacity:1;transform:scale(1)}
.craft-copy{position:relative;z-index:4;padding:0;background:transparent;margin-top:calc(-1 * (100svh - 62px))}
.craft-block{box-sizing:border-box;min-height:82svh;padding:0 18px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;opacity:.42;transition:opacity .55s cubic-bezier(.22,.61,.36,1)}
.craft-block.is-active{opacity:1}
.craft-block>span,.craft-block h2,.craft-block h3,.craft-block p{box-sizing:border-box;width:100%;max-width:560px;margin-left:auto;margin-right:auto;padding-left:18px;padding-right:18px;background:rgba(250,248,244,.82);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);text-align:center}
.craft-block>span{padding-top:22px;padding-bottom:0;font-size:11px;line-height:1.6;letter-spacing:.24em;color:#5f5a52}
.craft-block h2,.craft-block h3{margin-top:0;margin-bottom:0;padding-top:16px;padding-bottom:17px;font-size:clamp(24px,6.8vw,28px);line-height:1.58;letter-spacing:.04em;font-weight:400}
.craft-block p{margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:24px;font-size:15px;line-height:1.95;letter-spacing:.035em;color:#3e3a35}
.craft-block:not(.is-active)>span,.craft-block:not(.is-active) h2,.craft-block:not(.is-active) h3,.craft-block:not(.is-active) p{background:rgba(250,248,244,.58)}
}
@media(max-width:390px){
.craft-block{padding-left:14px;padding-right:14px}
.craft-block>span,.craft-block h2,.craft-block h3,.craft-block p{padding-left:16px;padding-right:16px}
.craft-block h2,.craft-block h3{font-size:23px;line-height:1.56;letter-spacing:.025em}
.craft-block p{font-size:14px;line-height:1.9}
}
@media(prefers-reduced-motion:reduce) and (max-width:820px){.craft-sticky .craft-image,.craft-block{transition:none}}
/* v35 — simple, robust mobile ending.
No fixed/sticky caption, no clone, no opacity animation.
The final caption scrolls upward normally; only the photo remains for a short beat. */
@media(max-width:820px){
[data-story] .story-step:last-child{
opacity:1!important;
transform:none!important;
min-height:100svh!important;
}
[data-story] .story-step:last-child small,
[data-story] .story-step:last-child h4,
[data-story] .story-step:last-child p{
opacity:1!important;
transform:none!important;
}
/* extra empty scroll distance after the last caption = photo-only moment */
[data-story]::after{
content:"";
display:block;
height:48svh;
pointer-events:none;
}
}
@media(prefers-reduced-motion:reduce) and (max-width:820px){
[data-story]::after{height:24svh}
}
/* v36 — shorter photo-only beat, only while scrolling downward. */
@media(max-width:820px){
html.v36-scroll-down [data-story]::after{
height:28svh!important;
}
html.v36-scroll-up [data-story]::after{
height:0!important;
}
[data-story]::after{
transition:none!important;
}
/* Reverse scrolling should feel immediate rather than animated. */
html.v36-scroll-up .story-image,
html.v36-scroll-up .story-step{
transition:none!important;
}
}
/* v40 — conservative motion polish; v36 layout remains untouched */
@media(min-width:821px){
.story-image{
transition:opacity .68s cubic-bezier(.22,.61,.36,1),
transform 1s cubic-bezier(.22,.61,.36,1)!important;
}
.story-image:not(.is-active){transform:scale(1.01)}
.story-image.is-active{transform:scale(1)}
.craft-image{transition:opacity .72s cubic-bezier(.22,.61,.36,1)!important}
}
@media(max-width:820px){
.story-image{transition:opacity .5s cubic-bezier(.22,.61,.36,1)!important}
}
@media(prefers-reduced-motion:reduce){
.story-image,.story-step,.craft-image{transition:none!important}
}
/* v41 — mobile product-category image crossfade: slower and softer.
Scope is limited to product story/category images only. */
@media(max-width:820px){
[data-story] .story-image{
transition:
opacity .95s cubic-bezier(.22,.61,.36,1),
transform 1.25s cubic-bezier(.22,.61,.36,1)!important;
}
}
/* v42 — mobile product stories use the same crossfade feel as CRAFT. */
@media(max-width:820px){
[data-story] .story-image{
transition:
opacity .72s cubic-bezier(.22,.61,.36,1),
transform 1s cubic-bezier(.22,.61,.36,1)!important;
}
}
/* v44 — ABOUT workshop video on mobile too.
Same asset as desktop; poster remains as a fallback. */
@media(max-width:820px){
.statement-media .statement-video{
display:block!important;
opacity:1;
visibility:visible;
}
.statement-media .statement-poster{
display:none!important;
}
}
@media(prefers-reduced-motion:reduce) and (max-width:820px){
.statement-media .statement-video{display:none!important}
.statement-media .statement-poster{display:block!important}
}
/* v48 — clean mobile rebuild. Desktop untouched. */
.story-mobile-image{display:none}
@media(max-width:820px){
/* Keep mobile simple and stable. */
.reveal{opacity:1!important;transform:none!important;transition:none!important}
.motion-img{transform:none!important;transition:none!important}
/* Product stories: ordinary vertical document flow only. */
[data-story]{
display:block!important;
position:relative!important;
height:auto!important;
min-height:0!important;
margin:0!important;
padding:0!important;
}
[data-story] .story-visual{
display:none!important;
height:0!important;
min-height:0!important;
}
[data-story] .story-copy{
display:block!important;
position:relative!important;
height:auto!important;
min-height:0!important;
margin:0!important;
padding:0 18px!important;
}
[data-story] .story-step{
display:block!important;
position:relative!important;
height:auto!important;
min-height:0!important;
margin:0!important;
padding:0 0 34px!important;
opacity:1!important;
transform:none!important;
transition:none!important;
background:transparent!important;
}
[data-story] .story-step:last-child{padding-bottom:10px!important}
[data-story]::after,
[data-story] .story-copy::after{
content:none!important;
display:none!important;
height:0!important;
}
.story-mobile-image{
display:block!important;
width:100%!important;
height:auto!important;
aspect-ratio:auto!important;
max-height:none!important;
object-fit:contain!important;
margin:0 0 20px!important;
padding:0!important;
border:0!important;
background:transparent!important;
}
[data-story] .story-step small{
display:block!important;
margin:0 0 10px!important;
opacity:1!important;
transform:none!important;
}
[data-story] .story-step h4{
margin:0 0 13px!important;
opacity:1!important;
transform:none!important;
}
[data-story] .story-step p{
margin:0!important;
opacity:1!important;
transform:none!important;
}
/* Remove the large gaps between category intro, comments and next category. */
.category{
margin-bottom:24px!important;
padding-bottom:0!important;
}
.category-hero{margin-bottom:20px!important}
.category-info{
padding-top:22px!important;
padding-bottom:0!important;
}
.category-text{
margin-top:18px!important;
margin-bottom:18px!important;
}
.other-category{padding-top:0!important}
/* ABOUT video remains enabled on mobile. */
.statement-media .statement-video{
display:block!important;
opacity:1!important;
visibility:visible!important;
}
.statement-media .statement-poster{display:none!important}
}
@media(prefers-reduced-motion:reduce) and (max-width:820px){
.statement-media .statement-video{display:none!important}
.statement-media .statement-poster{display:block!important}
}
/* v49 mobile order: comment -> image -> comment -> image */
@media(max-width:820px){
[data-story] .story-step{
display:flex!important;
flex-direction:column!important;
}
[data-story] .story-step small{order:1!important}
[data-story] .story-step h4{order:2!important}
[data-story] .story-step p{order:3!important}
.story-mobile-image{
order:4!important;
margin:24px 0 34px!important;
}
[data-story] .story-step{
padding-bottom:0!important;
}
[data-story] .story-step:last-child .story-mobile-image{
margin-bottom:14px!important;
}
}
.story-swipe-hint{display:none}
@media(max-width:820px){
.category{margin-bottom:30px!important;padding-bottom:0!important}
.category-info{padding-bottom:8px!important}
.story-swipe-hint{display:block!important;margin:0 18px 12px!important;font-size:11px!important;letter-spacing:.14em!important;color:#777!important;text-align:right!important}
[data-story] .story-copy{
display:flex!important;flex-direction:row!important;gap:12px!important;
width:100%!important;max-width:none!important;
overflow-x:auto!important;overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;scroll-padding-left:18px!important;
-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important;
padding:0 18px 16px!important;margin:0!important;scrollbar-width:none!important;
}
[data-story] .story-copy::-webkit-scrollbar{display:none!important}
[data-story] .story-step{
display:flex!important;flex-direction:column!important;
flex:0 0 84vw!important;width:84vw!important;min-width:84vw!important;
min-height:0!important;height:auto!important;
scroll-snap-align:start!important;scroll-snap-stop:always!important;
margin:0!important;padding:26px 22px 20px!important;
border-radius:24px!important;background:#f4f2ed!important;
overflow:hidden!important;box-sizing:border-box!important;
opacity:1!important;transform:none!important;transition:none!important;
}
[data-story] .story-step small{order:1!important;margin:0 0 12px!important;font-size:11px!important;letter-spacing:.18em!important;color:#777!important}
[data-story] .story-step h4{order:2!important;margin:0 0 13px!important;font-size:25px!important;line-height:1.48!important}
[data-story] .story-step p{order:3!important;margin:0 0 20px!important;font-size:14px!important;line-height:1.9!important}
.story-mobile-image{
order:4!important;display:block!important;
width:calc(100% + 44px)!important;max-width:none!important;
height:auto!important;aspect-ratio:4/3!important;object-fit:cover!important;
margin:auto -22px -20px!important;border:0!important;background:transparent!important;
}
[data-story],[data-story] .story-scroll{height:auto!important;min-height:0!important;margin-bottom:0!important;padding-bottom:0!important}
[data-story] .story-visual{display:none!important;height:0!important}
[data-story]::after,[data-story] .story-copy::after{content:none!important;display:none!important;height:0!important}
.other-category{padding-top:8px!important;padding-bottom:54px!important}
}
@media(max-width:820px){
[data-story] .story-step{justify-content:flex-start!important;height:auto!important;min-height:0!important;padding:24px 22px 0!important}
[data-story] .story-step p{margin-bottom:18px!important}
.story-mobile-image{margin:0 -22px!important;width:calc(100% + 44px)!important;aspect-ratio:4/3!important;object-fit:cover!important}
[data-story] .story-step small,[data-story] .story-step h4,[data-story] .story-step p{flex:none!important}
[data-story] .story-copy{align-items:flex-start!important}
}
/* v52 — mobile carousel: equal-height photo cards with copy over the image */
@media(max-width:820px){
[data-story] .story-copy{
align-items:stretch!important;
}
[data-story] .story-step{
position:relative!important;
display:grid!important;
grid-template-rows:auto auto 1fr!important;
flex:0 0 84vw!important;
width:84vw!important;
min-width:84vw!important;
height:520px!important;
min-height:520px!important;
padding:28px 24px 26px!important;
border-radius:24px!important;
overflow:hidden!important;
isolation:isolate!important;
background:#777!important;
color:#fff!important;
}
.story-mobile-image{
display:block!important;
position:absolute!important;
z-index:-2!important;
inset:0!important;
width:100%!important;
height:100%!important;
max-width:none!important;
margin:0!important;
padding:0!important;
object-fit:cover!important;
border-radius:24px!important;
}
[data-story] .story-step::after{
content:""!important;
display:block!important;
position:absolute!important;
z-index:-1!important;
inset:0!important;
height:auto!important;
background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.18) 45%,rgba(0,0,0,.32) 100%)!important;
pointer-events:none!important;
}
[data-story] .story-step small{
order:1!important;
position:relative!important;
z-index:1!important;
margin:0 0 16px!important;
color:rgba(255,255,255,.82)!important;
text-shadow:0 1px 8px rgba(0,0,0,.18)!important;
}
[data-story] .story-step h4{
order:2!important;
position:relative!important;
z-index:1!important;
margin:0 0 18px!important;
color:#fff!important;
text-shadow:0 1px 12px rgba(0,0,0,.2)!important;
}
[data-story] .story-step p{
order:3!important;
position:relative!important;
z-index:1!important;
align-self:start!important;
margin:0!important;
color:#fff!important;
text-shadow:0 1px 10px rgba(0,0,0,.24)!important;
}
}
/* English-language international wholesale section */
.wholesale{background:#f6f6f4;padding:135px 5vw;color:#37342f}.wholesale-inner{max-width:1280px;margin:auto}.wholesale-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:9vw;align-items:center;margin-top:48px}.wholesale-eyebrow{font-size:10px;letter-spacing:.22em}.wholesale h2{font-weight:400;font-size:clamp(35px,4.5vw,62px);line-height:1.4;letter-spacing:.015em;margin:20px 0}.wholesale-copy p{font-size:14px;line-height:2.25;letter-spacing:.02em}.wholesale-button{display:inline-block;margin-top:28px;border:1px solid #37342f;padding:20px 25px;font-size:11px;letter-spacing:.12em;transition:background .25s,color .25s}.wholesale-button:hover{background:#37342f;color:#fff}html[lang=en] .statement h1,html[lang=en] .craft h2{letter-spacing:.015em}html[lang=en] .category-title h3{letter-spacing:.015em;font-size:clamp(34px,4vw,60px)}html[lang=en] .story-step h4{overflow-wrap:normal}@media(max-width:820px){.wholesale{padding:85px 24px}.wholesale-grid{grid-template-columns:1fr;gap:20px;margin-top:34px}.wholesale h2{font-size:35px}.wholesale-copy p{font-size:13px}.wholesale-button{font-size:10px}html[lang=en] .statement h1{font-size:clamp(30px,8vw,39px)}html[lang=en] .category-title h3{font-size:34px}}
/* v54: scroll-driven crossfade, BODY hero only. Keep existing layout. */
#bath .body-crossfade{position:relative;isolation:isolate}
#bath .body-crossfade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:none!important}
#bath .body-crossfade .body-crossfade-first{z-index:1;opacity:1}
#bath .body-crossfade .body-crossfade-second{z-index:2;opacity:var(--body-fade,0);will-change:opacity}
@media(prefers-reduced-motion:reduce){#bath .body-crossfade .body-crossfade-second{will-change:auto}}
/* v55 — keep BODY image pinned until its scroll-driven crossfade completes. */
#bath .body-crossfade-stage{position:relative;padding-bottom:80svh}
#bath .body-crossfade{position:sticky;top:clamp(80px,calc((100svh - 38vw)/2),26svh);z-index:2}
@media(max-width:820px){
#bath .body-crossfade-stage{padding-bottom:80svh}
#bath .body-crossfade{top:clamp(74px,calc((100svh - 65vw)/2),30svh)}
}
@media(prefers-reduced-motion:reduce){#bath .body-crossfade-stage{padding-bottom:0}#bath .body-crossfade{position:relative;top:auto}#bath .body-crossfade-second{opacity:1!important}}
/* v56: lock the BODY hero in place while input drives the image transition. */
#bath .body-crossfade-stage{padding-bottom:0!important}
#bath .body-crossfade{position:relative!important;top:auto!important}
#bath .body-crossfade .body-crossfade-second{transition:none!important}
/* v58: BATHING displays a single static photo; all other animations remain unchanged. */
#bath .category-hero img{position:static;opacity:1;transform:none!important;}
/* v59 — language dropdown and non-overlapping NATURAL MATERIAL copy */
.language-select{position:relative;flex:none;font-size:10px;letter-spacing:.12em}
.language-select summary{list-style:none;display:flex;align-items:center;gap:7px;cursor:pointer;padding:12px 3px;white-space:nowrap;user-select:none}
.language-select summary::-webkit-details-marker{display:none}
.language-select summary:focus-visible,.language-options a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.language-chevron{font-size:14px}
.language-options{position:absolute;top:100%;right:0;z-index:150;min-width:195px;padding:8px;background:#fff;border:1px solid #e7e5e1;box-shadow:0 12px 35px rgba(0,0,0,.1);display:flex;flex-direction:column;gap:0}
.language-options a{display:flex;align-items:center;gap:13px;padding:10px 12px;white-space:nowrap;font-size:12px;letter-spacing:.02em}
.language-options a:hover{background:#f5f4f1}
.language-flag{font-size:21px;line-height:1}
@media(min-width:821px){
.editorial .ed-copy{left:51%;top:15vh;right:5%;width:auto;max-width:570px;padding:0;z-index:3}
.editorial .ed-copy p{font-size:clamp(16px,1.4vw,21px);line-height:1.85;letter-spacing:.035em;overflow-wrap:anywhere}
.editorial .ed-b{bottom:5vh;height:43vh;right:5vw;width:34vw}
.editorial .ed-word{pointer-events:none}
}
@media(max-width:820px){
.language-select{width:100%;font-size:15px;letter-spacing:.12em}
.language-select summary{padding:8px 0}
.language-options{position:relative;top:auto;right:auto;box-shadow:none;border:1px solid #e7e5e1;margin:8px 0 0;min-width:0;width:min(100%,320px)}
.language-options a{font-size:14px}
}